Question

我正在开发一个在HTML页面方面非常广泛的项目，但元素是相同的。我想从CSS文件中调用所有图像，以防万一有图像更改，我只需要返回并在css中更改它，而不是在100多个HTML页面中。

我的问题是显示图像。第2节图像是它嵌套的部分的整个高度，但这也没有发生。

此处代码为：https://jsfiddle.net/dreacaroli/206qn38m/5/

<!-- Section 1 with div-->
<div class="lightyellow section">
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-6 column img-responsive pull-right">
                <div class="in-sch-section1"></div>
            </div>
            <div class="col-sm-6 column">
                <h2>Reduce Scheduling Phone Calls</h2>
                <p>With , your employees can check their schedules, request time off and swap shifts withouto call you.</p>
                <a href="features.aspx#section3" class="btn"> Learn More</a>
            </div>
        </div>
    </div>
</div>
<!-- Section 2 -->
<div class="section">
    <div class="container">
        <div class="row">

            <div class="col-sm-6">
                <h2>Focustomers Insf Schedules</h2>
                <p>Create an to repeat daily, weekly or monthly, or let our auto-schedule tool do the work for you. The auto-scheduler creates random schedules based uponets.</p>
                <a href="features.aspx#section2" class="btn">Learn More</a>

            </div>
            <div class="col-sm-6">
                <div class="in-sch-section2"></div>
            </div>

        </div><!-- /.row-->    
    </div>
</div>

以下是第2节的外观： http://s12.postimg.org/yqcxgy69p/Screen_Shot_2015_06_10_at_1_48_58_PM.png

Answer 1

我只需阅读这篇文章：

我只需要返回并在css中更改它，而不是100+ HTML 页。

要知道您使用了错误的解决方案，静态HTML网站最多应该是10-20页，甚至是推动它。你过去一分钟就不再那样做了。

您需要一个CMS。

此外：

我想要从CSS文件中调用所有图像如果有图像更改

这没有任何意义，如果有图像更改，您仍然需要浏览所有100多个html文件并更改css文件名以确保浏览器更新缓存。

您至少需要一种服务器语言（即使您没有使用数据库）才能正常完成工作。

Answer 2

使用CSS执行此操作当然不是最好的方法，但可以这样做。

你的问题是你需要设置你正在使用显示图像的div的宽度和高度，因为空div是0px高和0px宽。

.example {
  background-image: url(path/to/image);
  background-size: cover;
  background-repeat: none;
  width: 100px;
  height: 100px;
}

编辑：我应该补充说，使用包装器类img-responsive将不会执行任何操作，因为.img-responsive操纵<img>元素，而不是<div>的背景

Boostrap：通过CSS在DIV中添加图像

2 个答案: