Прозрачность фонового изображения с CSS3? - PullRequest
Новая
       0

Прозрачность фонового изображения с CSS3?

17 голосов
/ 01 января 2012

Есть ли способ добавить прозрачность к фоновому изображению с помощью CSS3?

Ответы [ 8 ]

16 голосов
/ 01 января 2012

Если вы используете тег изображения для установки изображения, его можно легко изменить с помощью свойства CSS3 «opacity».

Это написано так: 

img {
    opacity: 0.4;
    filter: alpha(opacity = 40); /* For IE */
}

значение непрозрачности должно быть в диапазоне от 0 до 1. 0 - невидимый, а 1 - непрозрачный.

Если вы применяете фоновое изображение с помощью свойства CSS «background-image», вы все равно можете использовать прозрачность, чтобы изменить фоновое изображение, но это должно быть сделано по-другому.

Это связано с тем, что значение непрозрачности изменяет непрозрачность всего элемента, когда требуется только изменение непрозрачности на фоновом изображении.

Существует простой способ обойти эту проблему: просто наложить содержимое поверх изображения, обернуть его общим родителем и применить изменение непрозрачности только к части фона:

HTML 

<div id="container">
    <div id="background" class="translucent"></div>
    <div id="content"></div>
</div>

CSS 

.translucent {
    opacity: 0.4;
    filter: alpha(opacity = 40); /* For IE */
}
#container {
    position: relative;
    width: 200px;
    height: 200px;
}
#background, #content {
    position: absolute;
    top: 0;
    left: 0;
}
#background {
    background-image: url(http://www.thisisfake.com);
}
5 голосов
/ 02 июля 2013

Добавьте изображение к тегу HTML и добавьте background-color, используя rgba(0,0,0,[your opacity])

html {
    background:url('image.jpg') #303030; 
    background-size:cover;
}

body {
    background:rgba(0,0,0,0.7);
}
5 голосов
/ 19 июня 2013

Вы также можете создать прозрачное фоновое изображение, используя псевдо-классы css3 и прозрачность. Например ....

HTML: 

<div class="transparent-background">
        ...content that should have 100% opacity...
</div>

CSS: 

.transparent-background { ... }
.transparent-background:after {
    background: url("../images/yourimage.jpg") repeat scroll 0 0 transparent;
    opacity: 0.5;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}

см. Образец - http://jsfiddle.net/sjLww/

3 голосов
/ 26 декабря 2012

да, IE9, Firefox, Chrome, Opera и Safari используют свойство opacity для прозрачности. Свойство opacity может принимать значение от 0.0 до 1.0 . Более низкое значение делает элемент более прозрачным.

IE8 и более ранние версии используют filter: alpha (opacity = x) . Значение x может принимать значение от 0 до 100 . Более низкое значение делает элемент более прозрачным. 

img
{
    opacity: 0.5; /*(Range = 0.0 to 1.0)*/
    filter: alpha(opacity = 50); /* (Range = 0% to 100%) For IE8 & ealier */
}

Также мы можем присвоить OPACITY любому тегу <DIV> и сделать прозрачные поля.

Вот это *

ПОЛНЫЙ ПРИМЕР 

<html>
<head>
<style>
div.background
  {
  width:500px;
  height:250px;
  background:url(klematis4_small.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>
3 голосов
/ 05 января 2012

Вы можете сохранить это изображение с непрозрачностью из Photoshop или использовать сплошной или градиентный цвет в качестве фона с цветом RGBA: background-color: rgba (0,0,0, .4)

0 голосов
/ 12 мая 2016

Существует идеальный инструмент с именем: Petteriny (прозрачный пиксель-мейкер), который создает любой шаблон прозрачности, который вам нужен.Он также генерирует CSS, который вам нужен.Вот пример того, что делает этот инструмент.

.myDiv{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQIW2NUTmk3vjun8iwjAxCAOAA2KgVERG1HmQAAAABJRU5ErkJggg==
) repeat;}

Вы используете его, вот так в вашем html 

 <style> 
.transback {
   background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQIW2NUTmk3vjun8iwjAxCAOAA2KgVERG1HmQAAAABJRU5ErkJggg==
) repeat;}
  </style>
<div class="pure-u-1 transback">
 your text over image
</div>

В этом инструменте также можно скачать шаблон

0 голосов
/ 26 ноября 2015

Прозрачность фонового изображения не является частью спецификации CSS (хотя это должно быть, , пожалуйста, кто-то вставил ее в , я думаю, что Chrome может на самом деле это поддерживать).

Однако частичный способ имитировать прозрачность с фоновым изображением состоит в том, чтобы включить линейный градиент в CSS.Он будет помещен поверх фонового изображения, и если вы используете цвет фона тела, вы можете создать эффект исчезновения изображения на фоне веб-страницы, но вам нужно использовать RGB A * 1008.* Цветовой режим и переход от одного цвета к одному и тому же цвету с различными настройками альфа, например, так: 

background:linear-gradient(to right, rgba(0,0,255,0), rgba(0,0,255,1)), url(images/myImage.jpg) fixed no-repeat top center;
0 голосов
/ 04 декабря 2012

Непрозрачность изображения не является свойством CSS3, это свойство CSS2. С этим свойством не возникает проблем совместимости между браузерами. Оно отлично работает даже в более старых версиях IE.

Ниже приведен синтаксис 

img {
    opacity: 0.7;
    filter: alpha(opacity = 70); /* For IE */
}

значение непрозрачности должно быть от 0 до 1. 0 невидимо, а 0 непрозрачно.

для прозрачности для элементов DOM свойство background-color rgba можно использовать как 

div {
   background: rgba(200, 54, 54, 0.5); 
}

, поскольку существуют проблемы совместимости со старыми версиями IE, рекомендуется использовать запасной вариант. 

div {
    background: rgb(200, 54, 54); /* The Fallback */
    background: rgba(200, 54, 54, 0.5); 
}

Можно использовать также условные таблицы IE для повышения производительности. 

<!--[if IE]>
   <style type="text/css">
   .color-block { 
          background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); 
   zoom: 1;
} 

</style>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...