如何在两段文字之间定位背景图像

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

- Person

---

图片的高度和宽度相同吗？ - Alex

为什么需要背景图片？直接将图片内联即可。 - Sean Stopnik

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/

- Mario Plantosar

Answer 2

添加这个CSS：

.design, .media, .apps  {
background: url(https://31.media.tumblr.com/avatar_b0a905e3eb32_128.png) no-repeat top center;
background-position:75px 90px;
}

.feature-item p {margin-top:200px}

http://jsfiddle.net/vzovk7xd/6/

- AnatPort

Answer 3

您试图将带有background样式（超出元素流的）的inline元素放置在元素流顺序中...最好使用内联元素来呈现它，就像内联元素一样。

解决方案A：（修改CSS，删除背景）

.feature-item h2:after {
    content: url('https://31.media.tumblr.com/avatar_b0a905e3eb32_128.png');
    margin: 24px 0 0 0;
    display: inline-block;
}

http://jsfiddle.net/vzovk7xd/9/

解决方案 B：（修改 HTML）

 <article class="feature-item design">
     <h2>Web Design</h2>
     <figure></figure>


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

http://jsfiddle.net/vzovk7xd/3/

- serge

Answer 4

不要将它作为背景（如果你想这样做，你需要为.design盒子设置宽度和高度）... 相反，在h2和p元素之间添加另一个div元素：

 <h2>Web Design</h2>
 <div class="design"><img src="https://31.media.tumblr.com/avatar_b0a905e3eb32_128.png"/></div>
 <p>Lorem ipsum dolor sit amet</p>

工作的fiddle: http://jsfiddle.net/vzovk7xd/7/

- Dejan Munjiza