css 边界半径使背景图像模糊

x33g5p2x  于 2023-01-28  发布在  其他
关注(0)|答案(1)|浏览(128)

为什么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参数可以禁用此效果?

gzszwxb4

gzszwxb41#

试着在图像上使用image-rendering: pixelated,这应该会告诉浏览器显示图像的清晰边缘,而不是平滑它。

相关问题