logo标签列表

如何使用CSS使背景变暗？

htmlcssopacity
150

我有一个带文本的元素。每当我降低透明度时，整个页面的透明度都会降低。有没有办法只能让background-image变暗，而不影响其他任何东西？

background-image:url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');
12个回答
0

根据Alex Price的回答，我创建了一个scss mixin：

@function decToHex($dec) {
    $dec: round($dec);
    $hex: "0123456789ABCDEF";
    $first: (($dec - $dec % 16)/16)+1;
    $second: ($dec % 16)+1;
    @return str-slice($hex, $first, $first) + str-slice($hex, $second, $second);
}

@mixin darken-bg ($darkAmount) {
    $filterHex: decToHex(255 * $darkAmount);
    background: -moz-linear-gradient(rgba(0, 0, 0, $darkAmount),rgba(0, 0, 0, $darkAmount));
    background: -webkit-linear-gradient(rgba(0, 0, 0, $darkAmount),rgba(0, 0, 0, $darkAmount));
    background: linear-gradient(rgba(0, 0, 0, $darkAmount),rgba(0, 0, 0, $darkAmount));
    filter: unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='##{$filterHex}000000', endColorstr='##{$filterHex}000000',GradientType=0 )");
}

/* usage */
.some-div {
    @include darken-bg(0.2);
}

根据Pierpaolo Cira的回答编写的decToHex函数

-1

这是我找到的最简单的方法

  background: black;
  opacity: 0.5;
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接