Question

我的网页有背景图片，我有这个

HTML：

<body>
    <div class="front">
         <p>Hello World</p>
    </div>
</body>

CSS：

.front{
    background-color:silver;
    height:200px;
    width:200px;
}

宽度和宽度div的高度是200px，200px。我希望div元素覆盖的区域是半透明的，即。显示模糊背景，但div包含的文本也应该清晰。我该怎么做？

Answer 1

您需要rgba背景：

background-color: rgba(192,192,192,0.5);

可以使用红绿蓝-α模型（RGBa）定义颜色 rgba（）函数表示法。 RGBa将RGB颜色模型扩展为包括alpha通道，允许指定a的不透明度颜色。 a表示不透明度：0 =透明; 1 =不透明;

Answer 2

您只需将opacity: 0.5;添加到您的css类。

Answer 3

您可以对背景图像使用不透明度，并使用before选择器保持文本的不透明度：

像这样：

<script type="text/javascript">
$(document).ready(function(){
    var indx = 1;
    var rotator = JSON.parse('<?php echo json_encode($rotateCollectionPics)?>');
    var currentCollection = 1;
    var run = false;

    var globalID;
    var fps = 2;

    function photoRollover(){
        if (run) {
            setTimeout(function() {
                var numberOfFeatures = rotator[currentCollection].length - 1;
                if (indx > numberOfFeatures) { indx = 0; }
                var nextThumb = rotator[currentCollection][indx];
                var collectionSelector = 'collectionThumb-' + currentCollection;

                $('#'+collectionSelector+' img').attr('src',nextThumb);
                indx++;

                globalID = requestAnimationFrame(photoRollover);

            }, 3000 / fps );
        }
    }

    $(".collectionThumb").mouseenter(function(){
        run = true;
        currentCollection = $(this).data('collectionid');
        var collectionSelector = 'collectionThumb-' + currentCollection;
        var nextThumb = rotator[currentCollection][indx];
        $('#'+collectionSelector+' img').attr('src',nextThumb);
        indx++;
        globalID = requestAnimationFrame(photoRollover);
    });

    $(".collectionThumb").mouseleave(function(){
        run = false;
        cancelAnimationFrame(globalID);
    });

});

</script>

.front {
  z-index: 1;
}
.front:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url("http://webneel.com/wallpaper/sites/default/files/images/01-2014/23-animation-wallpaper.preview.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: 0.4;
  filter: alpha(opacity=40);
  height: 200px;
  width: 200px;
}
.font > p {
  z-index: -1;
  opacity: 1;
  filter: alpha(opacity=100);
}

JSFIDDLE DEMO

Answer 4

您可以将rgba用作背景图像，因为添加不透明度也会将其应用于div中的文本。

background-color: rgba(192,192,192,0.5);

但IE不支持此功能。

因此，您可以使用background-image属性创建并应用透明背景图像。

Answer 5

试试这个css：

.front{
     background-color:silver;
    height:200px;
    width:200px;
    opacity: 0.4;
}

根据您的选择增加或减少不透明度。

Answer 6

在CSS中使用不透明度是最简单的方法。

Answer 7

嗯，开箱即用，如果你尝试一点不同的标记，你可以真正模糊你的形象。

这就是

.front{
    background-color:silver;
    height:200px;
    width:200px;
     -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
    z-index:0;
}
.back{
  position: absolute;
  top: 0;
}

<body>
  <div class="front"></div>
  <div class="back">
    <p>Hello World</p>
  </div>
</body>

对网页部分的半透明效果

7 个答案: