pseudo-element 相关问题

我正在尝试使用 ::before 更改背景图像的不透明度而不影响其他元素。但即使在不同的浏览器上它似乎也不起作用。这是代码：超文本标记语言我正在尝试使用 ::before 更改背景图像的不透明度而不影响其他元素。但即使在不同的浏览器上它似乎也不起作用。这是代码： HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./styling/style.css"> <title>Gardening | Home</title> </head> <body>  <header> <nav> <h3 class="center">Gardenizo</h3>  <ul> <li><a href="#" class="a">Home</a></li> <li><a href="#" class="a">Shop</a></li> <li><a href="#" class="a">About</a></li> <li><a href="#" class="a">Contact</a></li> <li><a href="#" class="a">See more</a></li> </ul> </nav> </header>  <section class="land_page"> <div class="text center"> <p>Bring freshness into your place.</p> <h1>Plants are awesome!</h1> </div>  <img src="./assets/plantsbg3.jpeg" class="img" alt=""> </section> </body> </html> 这是CSS： * { padding: 0; margin: 0; box-sizing: border-box; } /* variables */ :root{ --header-color: white; } /* shared css */ .center{ justify-content: center; align-items: center; text-align: center; } .a{ text-decoration: none; color: black; } /* header */ header{ position: relative; background-color: var(--header-color); min-height: 80px; box-shadow: 3px 3px 12px black; } header nav{ width: 100%; display: flex; flex-direction: column; gap: 20px; } header nav ul{ display: flex; gap: .7cm; justify-content: center; list-style: none; } /* section 1 */ .land_page{ width: 100%; min-height: 500px; padding-top: 1cm; } .land_page .text{ position: relative; display: flex; flex-direction: column; margin-top: 3cm; } .land_page .text h1{ font-size: 4rem; } .land_page img{ width: 100%; display: flex; margin-top: -7cm; } .land_page img::before{ content: ''; position:absolute; top:0px; left:0px; opacity: 10%; } 我尝试了$::before{ }但还是没用。您的 CSS 正在尝试在 ::before 元素上设置 <img> 伪元素。但是，替换元素，例如<img>和<input>元素，不能有伪元素。注意： ::before 和 ::after 生成的伪元素包含在元素的格式框中，因此不适用于替换元素，例如<img>，或到 <br> 元素。您可能希望将 <img> 元素包装在非替换元素（例如 <div>）中，并使用该元素的 ::before 伪元素。

css pseudo-element

回答 1 投票 0

根据 CSS 中的上下文文本更改 ::before 伪元素的颜色

我有这个 CSS 代码片段，旨在将渐变背景应用于特定的文本元素。渐变的配置由标签的宽度决定。因为没有

css pseudo-element

回答 1 投票 0

为什么我的::after文本互相重叠

我想在文本的每个单词下显示单词的翻译。我尝试在后块中显示翻译，但当翻译比原始单词长时，它们会重叠。 .w...

html css pseudo-element

回答 1 投票 0

：伪元素没有出现后，即使它有内容属性

这是我的网页。提取问题后，CSS 类“updating”将在 ajax 请求进行时应用于更新按钮。该类有两个伪元素。 ( :之前 n :之后) 但是...

html css button pseudo-element

回答 1 投票 0

如何使用overflow-y: auto保持X方向溢出的内容？

::after 伪元素用于渲染箭头：然而，当在容器中添加overflow-y: auto时，箭头被切断： X方向溢出应该没问题（即箭头sh...

css overflow pseudo-element

回答 1 投票 0

设置伪元素的样式 ::after 不显示换行

我想使用CSS为我的博客标题创建下划线效果。为此，我使用伪元素 ::after 进行样式设置，并能够实现以下结果问题来了...

css sass pseudo-element

回答 1 投票 0

如何使用 attr() 在 ::before 伪元素的内容中添加换行符

我不想在使用数据集之前在 :: 的内容中添加换行符。这是我的代码： HTML： ...

html css pseudo-element

回答 1 投票 0

如何在日期输入中设置日历图标的样式？

我已经设计了输入[type=date]的样式入住我已经设计了输入[类型=日期] <div class="field"> <label class="label"> Check in</label> <input type="date" class="input" > </div><br> <div class="field"> <label class="label"> Check out</label> <input type="date" class="input" > </div><br> .input{ float: right; height: 1.8vw; width: 10vw; border: 1px solid #FCA311; border-radius: 5px; background-color: black; color: white; text-align: center; } 因此，日历图标不可见，我应该如何设计图标的样式。我希望图标是黄色以匹配主题我尝试使用 :before 伪元素，但它没有做任何事情我希望代码支持每个浏览器 input[type=date]:before { content: '\1F4C5'; font-family: Arial, sans-serif; font-size: 16px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; } 您可以在 ::-webkit-calendar-picker-indicator 元素上使用 input 来完成此操作。适用于 Chrome、Safari 和大多数基于 Webkit 的浏览器 input[type="date"]::-webkit-calendar-picker-indicator { background-color: yellow; }

html css forms styling pseudo-element

回答 1 投票 0

pseudo-element 相关问题

最新问题