Question

我正在尝试将背景图像设置为不透明，以使内容清晰可见。到目前为止，我所尝试的似乎并不起作用。这是我的代码。任何建议都会有很大的帮助

＆＃13;

   

 <head>
            <title></title>
        <style type="text/css">
        body {
          z-index: -1;
          opacity: 0.9;
        }
        </style>
        </head>
        <body class="my-container" style="background-image: url('http://placekitten.com/1500/1000');">
        
        <div class="container">  
        
            <h2>Scotch Scotch Scotch</h2>
          <p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
        
        <p>Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!</p>
        
        </article>
          
          
        </div>
        
        </body>

＆＃13;

Answer 1

这是一种愚蠢的方式......

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css">
body {
  z-index: -1;
  opacity: 20%;
}
</style>
</head>
<body class="my-container" style="background-image: url('https://jaymartmedia.com/example/kitten.png');">

<div class="container">  

    <h2>Scotch Scotch Scotch</h2>
  <p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>

<p>Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!</p>

</article>


</div>

</body>
</html>

不是最佳，但它快速而简单，我所做的只是使用图像编辑器添加不透明度。

请在此处下载图片。

https://jaymartmedia.com/example/kitten.png

希望这有帮助。

Answer 2

你在不透明度后忘了一个分号，以百分比衡量。固定代码如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css">
body {
  z-index: -1;
  opacity: 90%;
}
</style>
</head>
<body class="my-container" style="background-image: url('http://placekitten.com/1500/1000');">

<div class="container">  

<h2>Scotch Scotch Scotch</h2>
  <p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>

Answer 3

转换为PNG并使原始图像为0.2不透明度

因为如果你给身体不透明......它会影响身体内的所有内容，包括bg图像。

CSS: set background image with opacity?

Answer 4

Opacity适用于整个容器，从而在背景和内容中产生效果。

一个好的解决方案是使用具有所需不透明度的PNG并将其应用于子容器。在您的情况下，您可以申请.container。

使用此方法，您可以随时轻松切换背景图像，而无需担心其不透明度级别：

.container{
  background-image: url('transparent.png');
}

transparent.png图片将放置在背景图片的顶部。

Answer 5

另一种方法：

   

 <head>
            <title></title>
        <style type="text/css">
        .my-container {
          z-index: -1;
          opacity: 0.2;
          position: absolute;
        }
        </style>
        </head>
        <body>
        <div class="my-container">
            <img src='http://placekitten.com/1500/1000'>
        </div>
        
        <div class="container">  
        <article>
            <h2>Scotch Scotch Scotch</h2>
          <p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
        
        <p>Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!</p>
        
        </article>
          
          
        </div>
        
        </body>

Answer 6

尝试在你的部分或背景div中使用alpha过滤器，如果你在div上链接img并在body上设置不透明度，则doest工作，

试试这个

.youclass {
       background-image:url(../img/welovecats.jpg);
       opacity:0.60;
      -moz-opacity: 0.60;
       filter: alpha(opacity=0.6);
       background-repeat: no-repeat;
       background-attachment: fixed;
       background-size: 100%;}

HTML

<html>
<body>
    for section
<section class="youclass">
      content
</section>
</body>
</html>

仅将主体用于数据目标，滚动脚本，规范化和其他内容等主要项目

背景图像不透明度不起作用[HTML / CSS]

6 个答案: