为什么border-radius
会使背景图像模糊?
.orig,
.round,
.container,
.container::before
{
content: "";
width: 150px;
height: 150px;
background-size: cover;
background-image: url("https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w1024-h683-n-l50-sg-rj");
display: inline-block;
position: relative;
}
.round,
.container
{
border-radius: 10px;
}
.container
{
background-image: none;
overflow: hidden;
}
/* display text */
div::after
{
content: attr(class);
position: absolute;
color: white;
width: 100%;
top: 0;
display: block;
text-align: center;
}
<div class="orig"></div>
<div class="round"></div>
<div class="container"></div>
是否有某种css参数可以禁用此效果?
1条答案
按热度按时间gzszwxb41#
试着在图像上使用
image-rendering: pixelated
,这应该会告诉浏览器显示图像的清晰边缘,而不是平滑它。