如何定位兩個文本

Question

之間的background-image我想這樣的文字和圖像的位置：

這就是我現在

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/

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/

Answer 3

你嘗試把一個inline（在elments流程訂單中）元素background樣式（流出元素流）...更好地使用內聯元素將其呈現爲內聯元素。

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

Answer 4

不要把它作爲背景（如果你想做到這一點，你需要設置寬度和高度。設計盒）..相反，添加H2和P elmenets之間的另一個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> 

工作小提琴：http://jsfiddle.net/vzovk7xd/7/