CSS3 отзывчивое фоновое изображение становится размытым

Question

Я использую png изображение в качестве фона td внутри таблицы. Я использую «background-size: cover», чтобы сделать его отзывчивым. Но фоновое изображение становится размытым по более мелким окнам. Его штраф на полный размер. Есть ли способ предотвратить это?

<table> 
    <tr> 
    <td style="background-image: url(image.png)"> 
     <div></div> 
    </td> 
    </tr> 
</table> 


css: 
table td{ 
    background-position: center top; 
    background-repeat: no-repeat; 
    background-size: cover; 
    height: 96px; 
} 

Answer 1

Может быть установлена ​​ширина стола?

table { 
    width: 100%; 
} 

Answer 2

Номер

The PNG изображения на основе пикселей. Масштабирование делает его размытым, что бы вы ни делали. Возможно, вы смотрите изображение на смартфоне с дисплеем с высоким разрешением, и это будет еще хуже.

Единственное реальное решение для этого - использование векторной графики, например изображений SVG.

Answer 3

Если вы хотите сделать это в реагирующей образом, вы можете рассмотреть возможность использования меньшего изображения на небольших экранах, с запросами СМИ -

HTML:

<table> 
    <tr> 
    <td class="background-one"> 
     <div></div> 
    </td> 
    </tr> 
</table> 

CSS:

table td { 
    background-position: center top; 
    background-repeat: no-repeat; 
    background-size: cover; 
    height: 96px; 
} 

.background-one { 
    background-image: url('image-1.png'); 
} 

@media all and (max-width: 420px) { 
    .background-one { 
     background-image: url('image-1-small.png'); 
    } 
} 

Answer 4

Проблема не в балочной веревке размера, прогемма - фоновая позиция: центр. Попробуйте изменить рендеринг CSS-рендеринга.