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

   

 <head>
            <title></title>
        <style type="text/css">
        body {
          z-index: -1;
          opacity: 0.9;
        }
        </style>
        </head>
        <body class="my-container" style="background-image: url('http://placekitten.com/1500/1000');">
        
        <div class="container">  
        
            <h2>Scotch Scotch Scotch</h2>
          <p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
        
        <p>Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!</p>
        
        </article>
          
          
        </div>
        
        </body>
2
Neha Bajpai 6 Сен 2016 в 07:08

5 ответов

Вы забыли точку с запятой после непрозрачности, а также ее значение в процентах. Фиксированный код выглядит следующим образом:

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css">
body {
  z-index: -1;
  opacity: 90%;
}
</style>
</head>
<body class="my-container" style="background-image: url('http://placekitten.com/1500/1000');">

<div class="container">  

<h2>Scotch Scotch Scotch</h2>
  <p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
0
Ian 6 Сен 2016 в 04:13

Попробуйте использовать альфа-фильтр в своем разделе или фоновом div, не работает, если вы связываете img на div и устанавливаете непрозрачность для тела,

Попробуй это

.youclass {
       background-image:url(../img/welovecats.jpg);
       opacity:0.60;
      -moz-opacity: 0.60;
       filter: alpha(opacity=0.6);
       background-repeat: no-repeat;
       background-attachment: fixed;
       background-size: 100%;}

Html

<html>
<body>
    for section
<section class="youclass">
      content
</section>
</body>
</html>

Использовать тело только для основных элементов, таких как цель данных, сценарии прокрутки, нормализация и другие вещи

0
Luís Antônio de Melo 6 Сен 2016 в 05:21

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

Хорошее решение - использовать PNG с желаемым уровнем непрозрачности и применить его к дочернему контейнеру. В вашем случае вы можете подать заявку на .container.

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

.container{
  background-image: url('transparent.png');
}

Изображение transparent.png будет размещено поверх фонового изображения.

0
Shah Ghafoori 6 Сен 2016 в 04:32

Преобразуйте в PNG и сделайте исходное изображение непрозрачным 0,2

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

CSS: установить фоновое изображение с непрозрачностью?

0
Community 23 Май 2017 в 12:09

Другой способ сделать это:

   

 <head>
            <title></title>
        <style type="text/css">
        .my-container {
          z-index: -1;
          opacity: 0.2;
          position: absolute;
        }
        </style>
        </head>
        <body>
        <div class="my-container">
            <img src='http://placekitten.com/1500/1000'>
        </div>
        
        <div class="container">  
        <article>
            <h2>Scotch Scotch Scotch</h2>
          <p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
        
        <p>Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!</p>
        
        </article>
          
          
        </div>
        
        </body>
0
aavrug 6 Сен 2016 в 04:33