Question

我正在尝试使用中等不透明度的背景图片，但无法这样做，这是我的HTML： -

        
<body style="margin:auto;width:100%;height:100%;opacity:0.1;background-image:url('http://farm3.static.flickr.com/2098/2260149771_00cb406fd6_o.jpg')">
</body>

Answer 1

使用div而不是body标签。并为该div赋予特定的高度。

 <!DOCTYPE html>
        <head>
        <title>Your favourite travle partner</title>
        </head>

        <body>
            <div style="margin:auto;width:100%;height:400px;opacity:0.1;background-image:url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg')">

    </div>
        </body>

        </html>`

Answer 2

不是调整body elemet，而是添加一个额外的div来保存背景，最好将样式分成css文件。

#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('http://i40.tinypic.com/3531bba.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  opacity: 0.4;
}

<!DOCTYPE html>

<head>
  <title>Your favourite travle partner</title>
</head>

<body>
  <div id="background"></div>
</body>

Opacity不工作，即使我没有发现语法错误

2 个答案: