html - 如何在 CSS 中使背景图像透明？

Question

<style>
  header {
   text-align: center;
   background-image: url('http://i.imgur.com/7L79iny.jpg');
   background-size: 100% 100%;
   background-repeat: no-repeat;  
  }

这是我用来向页眉添加背景图像的代码。如何在不使标题的其余部分透明的情况下使图像半透明。

<header>
 <center><a href="http://imgur.com/EPd7PBU"><img src="http://i.imgur.com/EPd7PBU.jpg" height=350 title="source: imgur.com" /></a></center>
 <h1>Taylor's Blog</h1>
 <ul>
 <li><a href="#">About Me</a></li>
 <li><a href="#">Blogs</a></li>
 <li><a href="#">Contact Me</a></li>
 </ul>
</header>

Answer 1

您不能使用 css 更改背景图像的不透明度，只能更改元素的不透明度。但是，有一个非常简单的解决方法，只需要 css:

header {
   text-align: center;
   position:relative;
  }
  header:after{
    content:'';
    position:absolute;
    z-index:-1;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-image: url('http://i.imgur.com/7L79iny.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;  
    opacity:0.5;
  }

<header>
<a href="http://imgur.com/EPd7PBU"><img src="http://i.imgur.com/EPd7PBU.jpg" height=350 title="source: imgur.com" /></a>
 <h1>Taylor's Blog</h1>
 <ul>
 <li><a href="#">About Me</a></li>
 <li><a href="#">Blogs</a></li>
 <li><a href="#">Contact Me</a></li>
 </ul>
</header>

另一方面， <center> is depreciated , 不应使用。事实上，对于您拥有的 html，链接和图像已经以 text-align:center; 为中心。 , 使中心标签无用。