文字两侧加横线的解决方案

栏目: CSS · 发布时间: 6年前

内容简介:文字两侧加横线的需求你遇到过吗?在参与的项目中我遇到过这种需求,总结了一下,目前分为两种:一,文字所在的背景是纯色,单一颜色;二,文字所在背景是花色,或者是背景图片

文字两侧加横线的需求你遇到过吗?在参与的项目中我遇到过这种需求,总结了一下,目前分为两种:

一,文字所在的背景是纯色,单一颜色;

文字两侧加横线的解决方案

二,文字所在背景是花色,或者是背景图片

文字两侧加横线的解决方案

给你一些时间,思考一下:

文字两侧加横线的解决方案

脑海闪过了什么?定位,浮动,背景图片,伪元素。。。还是大脑一片空白?

条条大路通罗马,相信给你足够的时间,静静的坐在开着空调的房间里,你会得到自己的实现方法。

先看第一种,背景纯色的实现方案。

用的一个方法是用一个空的标签,来写这条横线。当然也可以用背景图,切一个中间透明,两边白条的图片。也可以使用伪元素。before after前后夹击。

在背景为图片的时候使用了伪元素这种方法,个人感觉伪元素这个东西真的是太强大了。

废话不说上代码:

HTML:

<div class="onpure_bg">
    <h2 class="onpure">
        <span class="onpure_title">标题在此</span>
    </h2>
    <span class="line"></span>

</div>
复制代码

CSS:

/*纯背景实现原理代码*/
.onpure_bg{
    background: #ccc;
    width: 700px;
    height: 400px;
    margin:0 auto;
    background-size: cover; 
    position: relative;
}
.onpure{
    position: absolute;
    top: 70px;
    left:50%;
    width: 150px;
    margin-left: -75px;
    margin-top: 50px; 
    z-index: 1
}
.onpure_title{
/*关键点:设置和背景颜色一样的颜色。*/
    background:#ccc;
    padding:0px 20px; 
}
.line{
    display: inline-block;
    width: 500px;
    height: 0px;
    border: 2px solid #fff;
    position: absolute;
    top:130px;
    left: 50%;
    margin-left: -250px;
}

复制代码

代码解析:

把标题和线条定位左右居中,上下靠上部分,用 z-index 将文字层级放置线条上方,在给标题使用和背景色一样的背景色。 padding 设置左右值撑开空隙。

It is so easy!

再来看背景为图片的实现方法,很显然,上边的方法取了个巧,利用背景色一致看不出差别。换成一张有复杂的背景图案的图片,这种方法就失效,我们借助伪元素来实现。

代码

HTML

<div class="onimg_bg">
    <h2 class="onimg">
        <span class="onimg_title">标题在此</span>
    </h2>
</div>
复制代码

CSS

/*背景图片实现原理代码*/

.onimg_bg{
    background: none no-repeat;
    width: 700px;
    height: 400px;
    margin:0 auto;
    background-size: cover; 
    position: relative;
    margin-bottom: 20px;
}

.onimg{
    position: absolute;
    top: 70px;
    left:50%;
    width: 600px;
    margin-left: -300px;
    text-align: center;
}
/*伪元素实现*/
.onimg_title:before{
    display: inline-block;
    position: relative;
    top:-7px;
    right: 20px;
    content: "";
    width: 200px;
    height: 0px;
    border: 2px solid #fff;
}
.onimg_title:after{
    display: inline-block;
    position: relative;
    top:-7px;
    left: 20px;
    content: "";
    width: 200px;
    color: #fff;
    height: 0px;
    border: 2px solid #fff;
}

复制代码

伪元素这种方法,也很简单,刚遇到的时候也是纠结了一会儿,有时候是思路的问题,想到这个方法,问题就迎刃而解了。

代码解析:

需要注意的是使用伪元素 content 属性必不可少,然后给伪元素块级化,就可以像设置正常的元素一样设置你想要的样式了,在这里设置了一个没有高度,宽200px的长条,通过 border 控制高;

也可以通过设置背景图片 background: none no-repeat ,代替 border 实现

针对这种需求,目前只想到伪元素实现,如果您有更好的方法,欢迎留言。

文字两侧加横线的解决方案

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

灵活Web设计

灵活Web设计

Zoe Mickley Gillenwater / 李静 / 2009-9 / 45.00元

《灵活Web设计》讲述如何应用可变或不固定布局及弹性布局来实现灵活设计,以满足用户的根据自己需求而调整浏览站点的窗口大小的要求。全书共分为9章,内容包括:理解灵活布局、可变布局和弹性布局存在的挑战、设计灵活布局的方法、准备网页设计、创建可变布局结构、创建弹性布局结构、规范灵活性、设置文字间距、添加背景图像和颜色、创建灵活的图像。 《灵活Web设计》适用于网页设计人员、网页设计爱好者。一起来看看 《灵活Web设计》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具