Как изменить только один элемент в классе

Question

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

#home{ 
background-image: url('../img/main.jpg'); 
background-position: center; 
background-size: cover; 
background-repeat: no-repeat; 
position: relative; 
height:100%; 
opacity: .8; 
} 

HTML:

<section id="home"> 
    <p>hi</p> 
    <p>hi</p> 
    <p>hi</p> 
    <p>hi</p> 
    <p>hi</p> 
</section> 

Answer 1

Правило opacity для элемента. Не для background. Если вам нужно сделать, таким образом, у вас есть два варианта:

1. подделать фон с помощью другого div и использовать opacity на нем.
2. Используйте два разных изображения с одним меньшим opacity.

Есть много хаки доступны:

• CSS Opacity on Child Element
• Использование :after и укладки его.

Answer 2

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

div { 
    width: 200px; 
    height: 200px; 
    display: block; 
    position: relative; 
} 

div::after { 
    content: ""; 
    background: url(image.jpg); 
    opacity: 0.5; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
} 

taken from here

Answer 3

Я не думаю, что есть какое-то свойство для CSS прозрачность фона.

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

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

Answer 4

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

Тем не менее, есть хакерские работы вокруг, которые включают перемещение «дочерних» элементов поверх фона с использованием абсолютного позиционирования - есть действительно полезная статья here.