html - 如何在两个文本之间定位背景图像

Question

我想像这样定位文本和图像:

这是我现在拥有的

http://jsfiddle.net/vzovk7xd/

<section class="feature">
   <div class="container">
       <article class="feature-item design">
          <h2>Web Design</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus, lacus ac commodo volutpat, felis odio pulvinar enim, non dapibus mauris nulla sed ipsum.</p>
           <a href="">READ MORE</a>
       </article>
       <article class="feature-item media">
          <h2>Social Media</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus, lacus ac commodo volutpat, felis odio pulvinar enim, non dapibus mauris nulla sed ipsum.</p>
           <a href="">READ MORE</a>
       </article>
       <article class="feature-item apps">
          <h2>Mobile Apps</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus, lacus ac commodo volutpat, felis odio pulvinar enim, non dapibus mauris nulla sed ipsum.</p>
           <a href="">READ MORE</a>
       </article>
   </div>
</section> 

CSS

.feature {
margin-top: 100px;
text-align: center;
line-height: 25px;
}
.feature-item {
    width: 33.3%;
    float: left;
}
.design {
    background: url(https://31.media.tumblr.com/avatar_b0a905e3eb32_128.png) no-repeat center center;
}

Answer 1

不要为您的 .design div 设置背景图片，在标题和段落之间放置另一个 div，为其指定宽度和高度，然后为该 div 设置背景图片。

<article class="feature-item design">
    <h2>Web Design</h2>
    <div class="image"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus, lacus ac commodo volutpat, felis odio pulvinar enim, non dapibus mauris nulla sed ipsum.</p>
    <a href="">READ MORE</a>
</article>

CSS

.image { width: 100%; height: 140px; background: url(https://31.media.tumblr.com/avatar_b0a905e3eb32_128.png) no-repeat center center; }

https://jsfiddle.net/vzovk7xd/1/