it-roy-ru.com

Сделать фоновое изображение тела HTML прозрачным

Я пытаюсь сделать мое фоновое изображение прозрачным, а остальная часть страницы не прозрачной, например блеклое фоновое изображение поверх нецветных HTML и CSS.

У меня есть HTML-страница с изображением в качестве фона с использованием div. Ниже приведена упрощенная версия страницы:

<HTML>

<head>

    <style type="text/css">
        #backgroundImage {
            background-image: url('../Documents/images/Sea.jpg');
            background-repeat: no-repeat;
            background-size: 100%;
            opacity: 0.4;
            filter:alpha(opacity=40);
            height:100%;
            width:100%;
            z-index:0.1;
        }

        .main{
            height:500px;
            width:900px;
            margin:auto;
            background-color:green;
            z-index:1;
            opacity: 1;
            filter:alpha(opacity=100);

        }
    </style>


</head>


<body>

<div id="backgroundImage">

    <div class="main">

    </div>

</div>

</body>

Я нашел эту настройку в следующем вопросе:

Как я могу сделать фон моего сайта прозрачным, не делая контент (изображения и текст) тоже прозрачным?

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

Я попытался настроить Z-индекс и непрозрачность на главном div, но это не работает.

Я чувствую, что это простое решение, но я просто не вижу решения.

Я также пробовал этот вопрос, но, похоже, он не предлагал решения:

Как мне сделать мое фоновое изображение прозрачным в CSS, если у меня есть следующий код?

и этот:

CSS background-image-opacity?

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

5
user4420358

HTML:

<div id="backgroundImage">

    <div class="main">

    </div>

</div>

CSS:

#backgroundImage{z-index: 1;}

#backgroundImage:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-image: url(http://static.tumblr.com/25bac3efec28a6f14a446f7c5f46b685/hywphoq/ufoniwv6n/tumblr_static_ldhkrazuoqo4g0s0sk8s4s4s.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    opacity: 0.4;
    filter:alpha(opacity=40);
    height:100%;
    width:100%;
 }

.main{
   height:320px;
   width:320px;
   margin:auto;
   background-color:green;
   z-index:-1;
   opacity: 1;
   filter:alpha(opacity=100);
}

JSFIDDLE DEMO

Ссылка на сайт: http://nicolasgallagher.com/css-background-image-hacks/demo/opacity.html

3
Discern

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

   <style>
div.image
  {
  width:500px;
  height:250px;
  background:url(images.jpg);
  background-repeat:no-repeat;
  background-position:center;
  border:2px solid;
  border-color:#CD853F;
  }
div.transparentbox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid;
  border-color:#CD853F;
  opacity:0.6;
  filter:alpha(opacity=60);
  }
div.transparentbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#CD853F;
  }
</style>
</head>
<body>
<div class="image">
<div class="transparentbox">
<p>Hello World<br>
</p>
</div>
</div>

div.image

Я создаю тег div для установки фонового изображения. с помощью высоты и ширины я даю размер, с помощью фона: url задает фоновое изображение, с помощью фонового повторения изображения никогда не повторяется, если размер изображения небольшой, background-position задает положение изображения, border: дать границу, которая является сплошной, border-color: атрибут для, чтобы дать цвет границы.

div.transparentbox

С помощью этого тега мы создаем прозрачное поле, атрибут margin используется для установки поля данных, background-color: используется для установки заднего фона, opacity используется для обеспечения прозрачности поля, filter : альфа (непрозрачность = 60); Для IE8 установлена ​​совместимость и ранее.

div.transparentbox p

это дано в стиле 

тег, это будет установить поле, вес шрифта и цвет шрифта.

0
user3475283