3

JSF 中。

为什么完全不.col-left-bg-image显示？

我刚刚意识到它没有显示，因为它里面没有任何内容。所以我把...它放进去检查并给它一个background-size:100% 100%（最初是auto 100%）。但结果background-image是显示了带有 的 div，但它不需要height100% 的父级（即.col-left）：s JSFiddle here

我还尝试使用内联img元素而不是divwith background-image，但这会导致灾难。JSFiddle 在这里。

@import url(<link href='http://fonts.googleapis.com/css?family=Open+Sans:700,300,600,400' rel='stylesheet' type='text/css'>);
html, body {
    height: 100%;
    margin: 0;
}
.section-big { /* change the width/height here */
    height: 80%;
    width: 80%;
	margin:100px auto 25px;
}
.container {
    display: table;
    table-layout: fixed;
    margin: auto;
    height: 100%;
    width: 100%;
}
.col {
    display: table-cell;
    vertical-align: top;
    height: 100%;
}
.col-left-bg-image {
    background: url("http://www.mediafire.com/convkey/7a01/xaagjmwa7yz1dgdzg.jpg?size_id=b") no-repeat;
    background-size: 100% 100%;
}

.col-left {
	padding:0px 25px;
}



.col h3, .col h5 {
    padding: 0;
    margin: 0;
}
.col section:nth-child(1) {
    height: 30%;
}
.col section:nth-child(2) {
    height: 22%;
}
.col section:nth-child(3) {
    height: 22%;
}
.col section:nth-child(4) {
    height: 26%;
}
.col section:nth-child(odd) {
    background: aqua;
}
.col section:nth-child(even) {
    background: lime;
}



h3 {
	color:#6c6969;
	transition:color 0.3s ease 0s;
	font-family:'Open Sans', sans-serif;
	font-weight:600;
	font-size:40px;
}

h5 {
	color:#6c6969;
	transition:color 0.3s ease 0s;
	font-family:'Open Sans', sans-serif;
	font-weight:400;
	font-size:20px;
}
<section class="section-big">
    <div class="container">
        <div class="col col-left">
			<div class="col-left-bg-image"></div>
            <!-- <img src="http://www.mediafire.com/convkey/9642/57q0fpdevvo1999zg.jpg?size_id=b" alt="Tun Tun!" /> -->
        </div>
        <div class="col col-right">
            <section class="section-one">
                <h3>HEADING</h3>
                <h5>Paragraph paragraph</h5>
            </section>
            <section class="section-two">
                <h3>HEADING</h3>
                <h5>Paragraph paragraph</h5>
            </section>
            <section class="section-three">
                <h3>HEADING</h3>
                <h5>Paragraph paragraph</h5>
            </section>
            <section class="section-four">
                <h3>HEADING</h3>
                <h5>Paragraph paragraph</h5>
            </section>
        </div>
    </div>
</section>

4

2 回答 2

3

我只是在你的第二个 JSFiddle 中的 'col-left-bg-image' 类中添加了 'height: 100%' ，它似乎工作正常。div 的“背景大小”的大小与 div 内的图像大小不同。图像会调整 div 的大小以适应它，使背景图像不会：D

JSFiddle 这里！

.col-left-bg-image {
    height: 100%;
    background: url("http://www.mediafire.com/convkey/7a01/xaagjmwa7yz1dgdzg.jpg?size_id=b") no-repeat;
    background-size: 100% 100%;
}

如果这不是你的意思，请告诉我：D

于 2015-06-05T19:35:22.767 回答
3

完整的解决方案（图像向右对齐）：

.col-left-bg-image {
    background: url("http://www.mediafire.com/convkey/7a01/xaagjmwa7yz1dgdzg.jpg?size_id=b") no-repeat;
    background-size: auto 100%;
    height: 100%;
    background-position: center right;
}

小提琴：https ://jsfiddle.net/lmgonzalves/tpu10dxu/7/

于 2015-06-05T19:44:41.157 回答