Question

enter image description here

http://i.imgur.com/Ta7cZ.png

带有----------

的Who右侧部分

这是李的背景吗？我真的在为如何创造这样的东西画上空白。

Answer 1

在这里你可以搞砸了。

http://jsfiddle.net/fjZfL/3/

HTML：

<div id="box">
    <h2>who?</h2>
    <p>I am 22 Year old designer …</p>
</div>

CSS：

#box {
    width: 200px;
    height: 150px;
    background: #eee;
    padding: 0 8px;
}
h2 {
    display: inline-block;
    padding: 18px 4px 0 10px;
    margin: 0;
    background: #eee;
}
p {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 20px 10px;
    margin-top: -10px;
}

Answer 2

或者 - 有人力资源解决方案

http://jsfiddle.net/UYYh5/4/

Answer 3

这不仅仅是横向规则吗？又名<hr />？

好吧，只是搜索了图片中的文字，找到了网站。这个应用于p块的CSS样式是我猜的方式。

border-top: 1px solid rgba(0, 0, 0, 0.1)

Answer 4

在这里：http://jsfiddle.net/x63x2/

CSS：

body { font-family:arial,helvetica,sans-serif ;
}

.block-item { width:350px ;
    height:300px ;
    padding:10px ;
    margin:auto ;
    background:#D4D4D4 ;
}

p { font-size:13px ;
    margin-top:14px ;
    margin-bottom:14px ;
    line-height:18px ;
}

.block-item h1 { display:block ;
    background:#D4D4D4 ;
    font-size:18px ;
    color:red ;
    padding:0px 5px 0px 0px ;
    position:absolute ;
    top:3px ;
}

和HTML：

<div class="block-item">
<hr>
<h1>Who?</h1>
<p>Nulla porttitor sodales quam, et molestie mi euismod vel. Nunc iaculis ligula ac dolor congue consequat. Cras tristique vulputate auctor. Pellentesque mattis massa vel arcu auctor tristique. Mauris rhoncus porta diam, sit amet euismod turpis viverra eu. Nulla in ligula sed nibh tristique laoreet. Nullam id magna erat. Sed porttitor mauris vel diam pharetra a volutpat tellus volutpat. Quisque placerat laoreet odio sit amet posuere. Duis id libero nisl.</p>
</div>

如果你想打扮这条线，你可以用你的人力资源与CSS打造一个风格。这只是一个基本的例子。

Answer 5

这是另一种选择。

http://jsfiddle.net/PZxA7/

.title{
 background-color:white;
    position:absolute;
    z-index:10;
}
.bar
{
    border-bottom:1px solid;
    position:absolute;
    display:inline-block;
    color:#b5b5b5;
    margin-top:-10px;
    width:350px;
}
.container
{
    width:350px;
}

<div class="container">

    <div class="title">W H O?</div>

    <div class="bar"/>&nbsp;</div>

<p><br/>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

Answer 6

复制此效果的简单方法如下：

div.wrapper{ width:  300px;
             font-family: 'Times New Roman';
             font-size: 13px;
             color:  #3b3a3a;
}
div.wrapper div{
    margin: 0px 0px;
}
div.header span{
    font-size: 14px;
    font-family: Verdana;
    font-weight: 300;
    display: inline-block;
    margin: 0px;
    width:  60px;
    background-color: #fff;

}
div.content p
{
    margin: 3px;
}
div.content p span
{
    background:url('http://i.imgur.com/Ta7cZ.png') no-repeat -150px -140px;
    height: 7px;
    width: 30px;
    display: inline-block;
}
div.wrapper div.header{
    background:url('http://i.imgur.com/Ta7cZ.png') no-repeat 0px -10px;
}
div.wrapper div.footer{
    background:url('http://i.imgur.com/Ta7cZ.png') no-repeat -10px -170px;
    height: 18px;
}


    <div class="wrapper">
        <div class="header"><span>Who?</span></div>
        <div class="content"><p>I'm a 22 year old designer who spends more time on the internet than I should.  
            I am currently living in Upstate NY, but would love to someday move away from the cold.  I am a sucker 
            for Apple products and enjoy a well-brewed beer.<span></span></p>
        </div>
        <div class="footer"></div>
    </div>

对我而言，对于背景薄的图像，图像看起来总是更干净。在我的例子中，你显然会将图像缩小，但你明白了。

如何在CSS中复制此效果？

6 个答案: