<div> 中的背景图像不显示 [英] Background-image in <div> doesn't display

问题描述

video id (#video) 中的 background-image 未显示.我已经包含了 pure grid 样式.我已经尝试了使用标签的替代方法，但是稍后我还想在图像中间添加一个按钮.有没有办法使用 div 标签来显示我的背景图像?谢谢

HTML 代码:

<div class="pure-g"><div class="pure-u-10-24"><h1 id="about">关于</h1><p class="text chinese_paragraph">(部分文字)</p>
<div class="pure-u-14-24 section2"><div id="视频">

<button>手表</button>

CSS 代码:

#right_content {背景颜色:#414141；位置:固定；右:0；顶部:0；宽度:700px；高度:100%；box-sizing: 边框框；填充:30px 20px；溢出:自动；}.pure-g >div {padding-left: 10px;padding-right: 10px;box-sizing: 边框框；}#关于 {白颜色;显示:内联块；位置:相对；边框顶部:2px 纯白色；垂直对齐:中间；font-family: "Source Sans Pro","Yuanti SC",sans-serif;边距:0；填充:0；}p.text {白颜色;font-family: "Source Sans Pro","Yuanti SC",sans-serif;}.pure-g .section2 {填充顶部:42px；}#视频 {背景图片:url("../images/video.png");位置:相对；宽度:360px；高度:200px；}

解决方案

你的 #video div 没有大小，它的宽度和高度都是 0px.为您的 div 设置一个大小，它将解决问题.

#video {背景图片:url("../images/video.png");位置:相对；宽度:240px；高度:100px；}

工作示例

The background-image within the video id (#video) isn't displaying. I've included the pure gridstyles. 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? Thanks

The HTML code:

<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:

#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;
}

解决方案

Your #video div has no size, it's width and height are 0px. Set a size to your div and it will solve the problem.

#video {
    background-image: url("../images/video.png");
    position: relative;
    width: 240px;
    height: 100px;
}

Working example

这篇关于<div> 中的背景图像不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！