css 黑色背景上的文字在英雄形象[关闭]

r7xajy2e 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(179)

已关闭。此问题需要details or clarity。目前不接受回答。
**要改进此问题吗？**通过editing this post添加详细信息并阐明问题。

2天前关闭。
Improve this question的
我尝试创建一个带有文字的英雄形象，但背景在文字后面是可见的。我的文字是白色，网站是黑色的

#hero-header{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("friends-cover2.jpg");
    background-position: center;
    background-size: cover;   
    background-repeat: no-repeat;
    height:66vh;
    margin-top: 25vh;
    position: relative;
    grid-area: hea;
}

.hero-header-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;  
    background-color: transparent;
}

个字符
我试过几种方法，但不知何故，它不能工作。

css

来源：https://stackoverflow.com/questions/77757739/black-background-on-text-in-hero-image

1条答案

按热度按时间

gijlo24d1#

要隐藏文本后面的背景图像，请向.hero-header-text类添加background-color属性，并将其设置为纯色，例如白色。以下是更新后的CSS：

.hero-header-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;  
    background-color: white;  <!-- Add this line -->
}

字符集
确保button元素也被正确定位，并且具有与文本背景混合的背景颜色。下面是button的更新代码片段：

<button class="hero-button">Read more.</button>

.hero-button {
    background-color: white;  <!-- Add this line -->
    color: black;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

的数据
确保hero-button类应用于HTML代码中的button元素。
希望这对你有帮助！

赞(0）回复(0）举报 2024-01-09

我来回答

css 黑色背景上的文字在英雄形象[关闭]

1条答案

相关问题

热门标签

最新问答