Question

我的背景图片和文字有问题。我只想将不透明度应用于背景图像，但是我的文本受到了影响。

HTML

namespace smoothboard.Models
{
public class gmail
{
    public string To { get; set; }
}
}

CSS

<div class="content">
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
</div>

Answer 1

没有背景不透明度属性，但是您可以使用伪元素来伪造它：

.content {
  position: relative;
}

.content::after {
  content: "";
  background: url(../img/103_n.jpg) left top no-repeat, url(../img/103_n.jpg) right bottom no-repeat;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Answer 2

您可以在（或）之后使用并设置不透明度

    .content {
      position: relative;
    }

    .content ::after {
    content: "";
    position: absolute;
    background:#000 \also give any color for background;
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width:100%;
    height:100%;  
    }

背景图像的不透明度而不影响文本

2 个答案: