效果:

实现:

//html
<div class="container">
  <span class="tip span-1">1111</span>
  <span class="tip span-2">2222</span>
  <span class="tip span-3">3222</span>
</div> //css
.tip{
display: inline-block;
margin-right: 20px;
color: #fff;
font-size: 14px;
padding: 10px 20px;
font-weight: bold;
box-shadow: 0 0 4px 1px rgba(0,150,0,0.3);
border-radius: 4px;
background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
background-size: 30px 30px;
}
.tip:hover{
  background: #00aff0;
  cursor: pointer;
  background-image: -webkit-linear-gradient(bottom left, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(bottom left, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(to top right, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}
.span-1{
  background-color: #5cb85c;
}
.span-2{
  background-color:#63A8DF;
}
.span-3{
background-color:#f85d00;
}

  

用background-image做成条纹背景的更多相关文章

  1. 用css实现条纹背景

    我先额外的说一下怎么用CSS绘制三角形: 绘制三角形是把边框加粗,将元素的宽高都设为0,让其余的边框颜色透明,下面我们来看实现的代码: 先把边框的颜色设置成不同颜色: #div{ border-col ...

  2. css条纹背景

    一. 水平条纹 1. 两种颜色: html <div class="stripe"></div> css .stripe{ width: 250px; he ...

  3. 利用CCS3渐变实现条纹背景

    本文摘自<CSS揭秘>中国工信出版集团 难题: 不论是在网页设计中,还是在其他传统媒介中(比如杂志和墙纸等),各种尺寸.颜色.角度的条纹图案在视觉设计中无处不在.要想在网页中实现条纹图案, ...

  4. css条纹背景样式、及方格斜纹背景的实现

    一.横向条纹如下代码: background: linear-gradient(#fb3 %, #58a %) 上面代码表示整个图片的上部分20%和下部分20%是对应的纯色,只有中间的部分是渐变色.如 ...

  5. CSS揭秘 技巧(五):条纹背景

    条纹背景 https://github.com/FannieGirl/ifannie/问题:条纹背景 在设觉设计中无处不在,我们真的可以用css 创建图案吗? 这一章相对还是比较复杂的哦!一起get. ...

  6. [css 揭秘] :CSS揭秘 技巧(五):条纹背景

    条纹背景 https://github.com/FannieGirl/ifannie/问题:条纹背景 在设觉设计中无处不在,我们真的可以用css 创建图案吗? 这一章相对还是比较复杂的哦!一起get. ...

  7. background 设置文本框背景图

    background 属性的作用是给元素设置背景,它是一个复合属性,常用的子属性如下: background-color 指定元素的背景颜色. background-image 指定元素的背景图像. ...

  8. css 条纹背景

    先介绍文章用到的二个知识点 background-size 属性 语法 background-size: length|percentage|cover|contain; css线性渐变 linear ...

  9. CSS 条纹背景深入

    一.水平渐变 实现水平条纹很简单 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

随机推荐

  1. 新概念英语(1-3)Sorry, sir

    Does the man get his umbrella back? A:My coat and my umbrella please. B:Here is my ticket. A:Thank y ...

  2. Python学习之条件判断和循环

    #coding= utf-8 # 条件判断和循环 # 如果if语句判断是True,就把缩进的两行print语句执行了,否则,什么也不做 age1 = 20 if age1 >= 18: prin ...

  3. 前端插件之Bootstrap Switch 选择框开关控制

    简介 Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式 它是依赖于Bootstrap的一款插件 下载 下载地址 在线引用 导入 因为它是依赖于Bootstrap的一款 ...

  4. Linux平台部署.Net Core SDK

    根据微软MSDN,.Net Core无论是1.x还是2.0都只支持64位系统. 准备 以下是.NetCore支持的系统版本 以下 Linux 64 位(x86_64 或 amd64)发行版本/版本支持 ...

  5. UVA-624 CD---01背包+输出路径

    题目链接: https://vjudge.net/problem/UVA-624 题目大意: 这道题给定一个时间上限,然后一个数字N,后面跟着N首歌的时间长度,要我们 求在规定时间w内每首歌都要完整的 ...

  6. git checkout+文件丢失

    坑:不知什么时候, 应该是初学git的时候, 在桌面git init了一下, 这次忘记切目录直接在桌面git checkout了, 导致文件丢失了. 解决: 简单复原: git reflog # 查看 ...

  7. Http协议消息报头

    哎.不知道怎么写Http协议... 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议. HTTP基于TCP/IP通信协议来传递数据 ...

  8. [LeetCode] 1-bit and 2-bit Characters 一位和两位字符

    We have two special characters. The first character can be represented by one bit 0. The second char ...

  9. pwd

    显示当前在文件系统里的确切位置 注: 系统根目录是/ 用户主目录是/home/用户名 对于root用户,用户主目录为/root

  10. 个人建站&mac下安装hexo

    title: 个人建站&mac下安装hexo date: 2018-04-18 16:34:02 tags: [mac,blog,个人建站,markdown] --- 这两天使用了markdo ...