Question

我想像这样定位文字和图片：

这就是我现在所拥有的

<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

您尝试使用背景样式（在元素流中）放置内联（在元素流顺序中）元素...更好地使用内联元素将它呈现为内联元素。

解决方案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/

Answer 4

不要把它作为背景（如果你想这样做，你需要为.design框设置宽度和高度）..而是在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/

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

4 个答案: