1. дома
  2. Вопрос и ответ
  3. Почему я не могу изменить непрозрачность элемента h1 до 1 после изменения непрозрачности элемента html до 0,5?

Почему я не могу изменить непрозрачность элемента h1 до 1 после изменения непрозрачности элемента html до 0,5?

2016-08-01 2 views
2

Я добавил фоновое изображение в свой элемент html в css, чтобы он расширялся с размером веб-браузера. Я изменил непрозрачность в этом элементе html на 0,5. Я хочу изменить дочерние элементы (в частности, h1 и элементы абзаца) обратно на непрозрачность 1, чтобы текст не был прозрачным. Это не работает. Пожалуйста, помогите :)Почему я не могу изменить непрозрачность элемента h1 до 1 после изменения непрозрачности элемента html до 0,5?

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Title</title> 
    <link rel = "stylesheet" href = "style.css"> 
</head> 

<body> 

    <p id ="topBar"></p> 

    <h1>Heading</h1> 

    <h3>Name</h3> 

    <p> 
     Paragraph 
    </p> 

    <h3>Heading</h3> 

    <p>More text</p> 

    <h3>Send us an email!</h3> 

    <form> 
     <input style ="width:200px" type="email" placeholder ="Email" name="email"><br><br> 
     <textarea style ="height:100px;width:200px"placeholder = "Message" name="message"></textarea><br><br> 
     <input type="submit" value ="Send" name="send"> 
    </form> 

    <p id ="bottomBar"></p> 
</body> 
</html>

CSS:

html { 

background: url(pen.jpg) no-repeat center fixed; 
background-size: cover; 


font-family: Garamond; 
text-align: center; 

opacity: 0.5; 

} 

h1 { 

opacity: 1; 
}

источник

2016-08-01 koz

+2

@LaurIvan Неа. Правило h1 более специфично, чем правило html, поэтому оно применяется. – JJJ

+1

весь html-документ имеет директиву непрозрачности, он влияет на все, независимо от специфики или приоритета. @LaurIvan добавляет!Важно ничего не делает. вам нужно установить меньшую непрозрачность только для определенных элементов. –

+0

@SLowLoris но как? h1 вложен внутри html, следовательно, согласно приоритету css, правила h1 должны переопределять правила html – geeksal

ответ

0

если вы установите непрозрачность родителя к 0.5, все дочерние элементы будут получать эту непрозрачность. Я предлагаю вам использовать прозрачный img в качестве фона вместо этого, или вы могли бы дать этот фон псевдоэлементу.

(я использовал цвет фона для целей примера, но вы можете использовать background-image и opacity:0.5 вместо этого. Он все еще работает так же)

html { 
 

 

 

 

 
font-family: Garamond; 
 
text-align: center; 
 

 

 
position:relative; 
 

 

 
} 
 
html:before { 
 
    height:100%; 
 
    width:100%; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    margin:0 auto; 
 
    background:rgba(0,0,0,0.5); 
 
    
 
    content:""; 
 
    z-index:-1; 
 
} 
 

 
h1 { 
 

 
opacity: 1; 
 
}
<p id ="topBar"></p> 
 

 
    <h1>Heading</h1> 
 

 
    <h3>Name</h3> 
 

 
    <p> 
 
     Paragraph 
 
    </p> 
 

 
    <h3>Heading</h3> 
 

 
    <p>More text</p> 
 

 
    <h3>Send us an email!</h3> 
 

 
    <form> 
 
     <input style ="width:200px" type="email" placeholder ="Email" name="email"><br><br> 
 
     <textarea style ="height:100px;width:200px"placeholder = "Message" name="message"></textarea><br><br> 
 
     <input type="submit" value ="Send" name="send"> 
 
    </form> 
 

 
    <p id ="bottomBar"></p>

источник

2016-08-01 09:18:06

+0

, чтобы прояснить еще больше: установка непрозрачности до 0,5 на родительском div и 0,4 на абзаце внутри этого div приведет к непрозрачности 0,5 * 0,4 = 0,2 на детском абзаце , –

-1

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

Я изменил ваш фон на background: rgba(0, 0, 0, .5);, а затем больше не нужно менять прозрачность текста.

Это самый простой способ его изменения, используя только непрозрачность фона.

JS fiddle here

html { 
 

 
background: url(pen.jpg) no-repeat center fixed; 
 
background-size: cover; 
 

 

 
font-family: Garamond; 
 
text-align: center; 
 

 
background: rgba(0, 0, 0, .5); 
 

 
} 
 

 

<body> 
 

 
    <p id ="topBar"></p> 
 

 
    <h1>Heading</h1> 
 

 
    <h3>Name</h3> 
 

 
    <p> 
 
     Paragraph 
 
    </p> 
 

 
    <h3>Heading</h3> 
 

 
    <p>More text</p> 
 

 
    <h3>Send us an email!</h3> 
 

 
    <form> 
 
     <input style ="width:200px" type="email" placeholder ="Email" name="email"><br><br> 
 
     <textarea style ="height:100px;width:200px"placeholder = "Message" name="message"></textarea><br><br> 
 
     <input type="submit" value ="Send" name="send"> 
 
    </form> 
 

 
    <p id ="bottomBar"></p> 
 
</body>

источник

2016-08-01 09:21:10 Relisora

1

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

В вашем случае «html» имеет непрозрачность: 0,5, поэтому его дочерний элемент i.e 'h1' имеет непрозрачность: 1 будет по-прежнему иметь 0,5 непрозрачности.

Для вас есть 2 решения:
1. Сделайте фоновое изображение i.e. 'pen.jpg' немного прозрачным с помощью программного обеспечения для редактирования фотографий, такого как Photoshop.
2. Используйте фоновое изображение в псевдокоде «после». то есть

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

Любое из вышеперечисленных работ будет работать для вас.

источник

2016-08-01 09:23:15

+0

Не был ли мой ответ правильным? Почему отрицательный голос? –

+1

Downvote не от меня, но я думаю, что это было связано с этим предложением: «В вашем случае« html »имеет непрозрачность: 0,5, поэтому его дочерний элемент, т.е.« h1 »имеет непрозрачность: 1 не будет иметь никакого значения.« Но на самом деле, если у вас есть элемент opacity 0.5 внутри другого элемента opacity 0.5, эффект будет 0.25 непрозрачности, так что есть разница. Может быть, вы можете отредактировать это предложение ... – gregn3

+0

Спасибо @ gregn3. Я отредактировал свое предложение. –

0

Вы также можете применить фон к элементу body вместо html. потому что все видимое содержание находится внутри в теге тела

body{ 
 
background:rgba(255,0,0,0.5); 
 

 

 
font-family: Garamond; 
 
text-align: center; 
 

 
opacity: 0.5; 
 

 
} 
 
h1 { 
 

 
opacity: 1; 
 
}
<p id ="topBar"></p> 
 

 
    <h1>Heading</h1> 
 

 
    <h3>Name</h3> 
 

 
    <p> 
 
     Paragraph 
 
    </p> 
 

 
    <h3>Heading</h3> 
 
    
 
    <p>More text</p> 
 

 
    <h3>Send us an email!</h3> 
 

 
    <form> 
 
     <input style ="width:200px" type="email" placeholder ="Email" name="email"><br><br> 
 
     <textarea style ="height:100px;width:200px"placeholder = "Message" name="message"></textarea><br><br> 
 
     <input type="submit" value ="Send" name="send"> 
 
    </form> 
 

 
    <p id ="bottomBar"></p>

источник

2016-08-01 09:28:15 geeksal

 Смежные вопросы

  • Нет связанных вопросов^_^