gpt4 book ai didi

html - div 的背景图像未显示。我能做些什么?

转载 作者:行者123 更新时间:2023-11-28 01:27:05 25 4
gpt4 key购买 nike

我已经在下面输入了 HTML 和 CSS 代码。问题是背景图像无法出现。请帮忙。提前致谢。

.parallax-1 {
height: 200px;
width: 100%;
background: linear-gradient(to bottom, #000 -10%, transparent 30%),
linear-gradient(to top, #000 -10%%, transparent 30%),
url('http://lorempixel.com/400/200');
background-size: cover;
}

.parallax {
width: 100%;
}

.descript {
background: #f2f2f2;
font-family: 'open sans', sans-serif;
font-style: italic;
font-weight: 200;
font-size: 0.7em;
padding: 5px 10px;
}
<!DOCTYLE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,800italic,300,400' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="parallax-1 parallax">
<div class="descript-parallax">
<span>Description for the image</span><br>
<span class="photo-descript">Copyright someone</span>
</div>
</div>
</body>
</html>

更新:按照答案中给出的一些代码中的建议,我尝试删除了线性渐变。我怎样才能添加它们?另外,为什么这个问题只出现在顶级浏览器 Chrome(最新版本)中?根据下面的评论,一些浏览器正在显示它。

最佳答案

你的 css 搞混了。

这样使用

body {
background: #6cab26;
background-image: url(IMAGE_URL); /* fallback */
background-image: url(IMAGE_URL), -webkit-gradient(linear, left top, left bottom, from(#6cab26), to(#6ceb86)); /* Saf4+, Chrome */
background-image: url(IMAGE_URL), -webkit-linear-gradient(top, #6cab26, #6ceb86); /* Chrome 10+, Saf5.1+ */
background-image: url(IMAGE_URL), -moz-linear-gradient(top, #6cab26, #6ceb86); /* FF3.6+ */
background-image: url(IMAGE_URL), -o-linear-gradient(top, #6cab26, #6ceb86); /* Opera 11.10+ */
background-image: url(IMAGE_URL), linear-gradient(to bottom, #6cab26, #6ceb86); /* W3C */
}

为了用gardient获取背景图片。( How do I combine a background-image and CSS3 gradient on the same element? )

关于html - div 的背景图像未显示。我能做些什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31636205/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com