HTML / CSS / jQuery: непрозрачность фонового изображения - PullRequest
Новая
       6

HTML / CSS / jQuery: непрозрачность фонового изображения

3 голосов
/ 22 декабря 2010

Допустим, у меня есть div, и этот div должен иметь background-image: url (foobar.png). Также, однако, непрозрачность foobar.png должна быть установлена ​​на 40%, чтобы фоновое изображение было полупрозрачным. Как я могу это сделать?

Если это невозможно без JavaScript, есть ли пример сценария, к которому я могу обратиться? Как то так? 

jQuery.fn.fadedBgImg = function(url, opacity) {

    // Create block element that fills `this` element

    // Set z-index of said element to lowest

    // Set opacity of said element to 40%

    // Insert said element into parent
}

Ответы [ 6 ]

4 голосов
/ 22 декабря 2010

Используйте CSS для установки непрозрачности: 

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

Редактировать:

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

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

И использовать CSS следующим образом: 

#container {
    position: relative;
    width: 200px;
    height: 200px;
}

#background, #content {
    position: absolute;
    top: 0;
    left: 0;
}
1 голос
/ 10 марта 2016

Попробуйте это .. Небольшие изменения в структуре HTML ... и вместо использования фонового изображения используйте обычное изображение и установите его обратно с низкой непрозрачностью.

.my_div{width:300px;height:300px;position:relative;}
.my_div div.back_image{display:block; position:absolute; width: 100%; height:100%;top:0px ; left:0px;opacity:0.8;z-index:1;}
.my_div div.back_image img {width: 100%; height:100%;}
.my_div div.front_text{position:absolute; width: 100%; height:100%;top:0px ; left:0px;opacity:1;z-index:99;padding:10px;color:#ffffff;box-sizing: border-box;}
<div class="my_div">
  <div class="back_image"><img src="https://newevolutiondesigns.com/images/freebies/black-wallpaper-10.jpg"></div>
  <div class="front_text">
  <h2>Testing Title</h2>
  <p>Lorem Ipsum content testing.
  This is Prakash Rao </p>
    </div>
</div>
1 голос
/ 22 декабря 2010

Я считаю, что это самый простой метод: в вашем графическом редакторе установите прозрачность в foobar.png на 60% и сохраните его как 24-битный png-файл. Если вам нужно отправить этот документ в IE6 и вы не хотите использовать исправление png, это не решение.

В противном случае непрозрачность в веб-браузерах является такой раздражающей вещью с точки зрения кросс-браузерной поддержки, а работа с прозрачностью дочерних элементов является типичной проблемой, насколько я помню.

К сожалению, у меня нет сценариев, которые решают эту проблему.

edit: я вижу, что вы отредактированы, и я могу сказать, что вы не настолько не осведомлены о том, что вы делаете, как я первоначально ожидал. Не обижайся, если мой совет кажется немного элементарным, хаха.

0 голосов
/ 10 марта 2016 
 In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element.



img { opacity: 0.4; filter: alpha(opacity=40); //forIE* and earlier

img:hover { opacity: 1.0; filter: alpha(opacity=100); //forIE* and earlier

<img src="klematis.jpg" width="150" height="113" alt="klematis">

<img src="klematis2.jpg" width="150" height="113" alt="klematis">
0 голосов
/ 23 августа 2015

Хотя прямой поддержки установки непрозрачности фонового изображения нет, вы можете указать несколько значений фонового изображения , которые отображаются с первым, ближайшим к зрителю.

Таким образом, если вы по какой-то странной причине не можете просто отредактировать непрозрачность изображения в редакторе изображений и подать измененное изображение, вы можете попробовать что-то вроде: 

semitransparent = "images/white50.png"; //a 1x1 pixel image, white at 50% transparency.
myElement.style.backgroundImage = "url('"+semitransparent+"'), url('"+backgroundImage+"')";

В этом примере предполагается, что вы обычно визуализируете на белом фоне страницы;Вы можете изменить цвет полупрозрачного изображения, если вы пытаетесь смоделировать полупрозрачность с некоторым другим цветом, частично просвечивающим «сквозь».

0 голосов
/ 22 декабря 2010

Попробуйте изменить непрозрачность с помощью css: 

opacity:0.4
...