0

我有以下问题：我目前正在使用 html 和 css 制作一个网站。我已经构建了这样的背景：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.background {
        width: 500px;
        height: 250px;
        background: url(klematis.jpg) repeat;
        border: 2px solid black;
      }
      div.transbox {
        width: 400px;
        height: 180px;
        margin: 30px 50px;
        background-color: #ffffff;
        border: 1px solid black;
        opacity:0.6;
        filter:alpha(opacity=60); /* For IE8 and earlier */
      }
      div.transbox p {
        margin: 30px 40px;
        font-weight: bold;
        color: #000000;
      }
    </style>
  </head>
  <body>
    <div class="background">
      <div class="transbox">
        <p>
          This is some text that is placed in the transparent box.
          This is some text that is placed in the transparent box.
          This is some text that is placed in the transparent box.
          This is some text that is placed in the transparent box.
          This is some text that is placed in the transparent box.
        </p>
      </div>
    </div>
  </body>
</html>

当然，我还想在盒子里放一些额外的图片，但是你可以看穿它们，你可以看到背景图片，所以图片看起来很苍白透明。我怎样才能只为图片制作不同的背景颜色才能看起来很立体？？？

4

1 回答 1

0

您可以通过设置元素的background属性来设置图像的背景，例如img

img { background: black; }

这会覆盖初始值background: transparent，如果图像具有透明区域，则该初始值会让页面背景发光。

于 2013-04-21T16:01:08.350 回答