[英]Background-image in <div> doesn't display
The background-image
within the video id
(#video) isn't displaying. video id
(#video)中的background-image
未显示。 I've included the pure grid
styles. 我包括了
pure grid
样式。 I've tried alternate ways of using tags, however later on i'd also like to add in a button in the middle of the image. 我尝试了使用标签的其他方式,但是稍后我也想在图像的中间添加一个按钮。 Is there a way of using div tags to display my background-image?
有没有一种方法可以使用div标签显示我的背景图像? Thanks
谢谢
The HTML code: HTML代码:
<div id="right_content">
<div class="pure-g">
<div class="pure-u-10-24">
<h1 id="about">About</h1>
<p class="text chinese_paragraph">
(Some text)
</p>
</div>
<div class="pure-u-14-24 section2">
<div id="video">
</div>
<button>Watch</button>
</div>
</div>
</div>
The CSS code: CSS代码:
#right_content {
background-color: #414141;
position: fixed;
right: 0;
top: 0;
width: 700px;
height: 100%;
box-sizing: border-box;
padding: 30px 20px;
overflow: auto;
}
.pure-g > div {
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
#about {
color: white;
display: inline-block;
position: relative;
border-top: 2px solid white;
vertical-align: middle;
font-family: "Source Sans Pro","Yuanti SC",sans-serif;
margin: 0;
padding: 0;
}
p.text {
color: white;
font-family: "Source Sans Pro","Yuanti SC",sans-serif;
}
.pure-g .section2 {
padding-top: 42px;
}
#video {
background-image: url("../images/video.png");
position: relative;
width: 360px;
height: 200px;
}
You should be able to display the image in the video div. 您应该能够在视频div中显示图像。 Try with a background-color first to see if it works, maybe wrong link to image.
首先尝试使用背景色,看看它是否有效,也许是错误的图像链接。 And check and make sure the video div has a width and height.
并检查并确保视频div具有宽度和高度。
Your #video
div has no size, it's width and height are 0px. 您的
#video
div没有大小,宽度和高度均为0px。 Set a size to your div and it will solve the problem. 为您的div设置大小,它将解决问题。
#video {
background-image: url("../images/video.png");
position: relative;
width: 240px;
height: 100px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.