填充部分元素示例

为某个元素设置CSS规则background-image 属性，则可以做到部分元素有背景颜色。

下面的示例演示如何如何给段落元素加背景。

<!DOCTYPE html>
<html>
    <head>
        <title>填充部分</title>
        <style type="text/css">
            p {
                background-image: url("https://static.collectui.com/shots/2890879/colorful-patterns-large");
                padding: 10px;
                color:#fff;}
        </style>
    </head>
    <body>
        <h1>软件开发，成就梦想</h1>
        <h2>学编程，上利永贞网 https://www.liyongzhen.com/</h2>
        <p>我们能为中国‘996’程序员做些什么？怎样才能能引起西方媒体和政府的关注？</p>
        <p>在程序员圈子里颇有名气的代码托管平台GitHub上，有人发起了一个名为“996.ICU”的项目，意为“工作996，生病ICU”，
        “996”即许多企业的程序员工作状态，从上午9点干到晚上9点，每周工作6天。这一项目得到了大量程序员的响应，自从3月26日注册以来，
        截至4月2日Star数已突破15万整数关口，表示至少有15万名程序员关注了这个项目。</p>
    </body>
</html>
 

CSS 背景图像 填充部分元素示例的更多相关文章

  1. CSS 背景图像 填充整个页面示例

    background-image 属性可以设置背景图像. 背景图像可以填充整个页面的,也可以填写一部分. background-image 属性的使用很简单:background-image:url( ...

  2. CSS背景图像的简单响应

    本文设有很多,最理想的解决方案,响应图像只是其中之一.我们建议您查看不同的方法,然后再选择一个特定的响应图像解决方案,包括这两个:如何避免重复下载响应图像中选择响应图像解决方案. 大家都在谈论的的sr ...

  3. CSS让DIV按照背景图片的比例缩放，并让背景图片填充整个元素（转）

    目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...

  4. CSS背景图像位置属性background-position百分比详解

    百分比值同关键字很接近,但其操作方式不一样.用百分比值来居中一幅背景图像,也很简单: body { background-image;url(beijing.gif); background-repe ...

  5. CSS 背景图像 背景图片定位

    背景图片定位 background-position属性可以给背景图片定位. background-position属性有两个值,第一个值是水平位置,第二个值是垂直位置.这两个值可以使用百分比来表示( ...

  6. CSS 背景图像 重复图像

    重复图像 background-repeat 属性可以重复图像,这对于小图片来说是福音. background-repeat 属性有6个值: repeat 背景图像在垂直方向和水平方向都重复 repe ...

  7. CSS 背景图像 background属性简写

    background属性简写 background属性可以像margin padding属性一样,有简写方法,它的简写顺序是: background-color background-image ba ...

  8. CSS——背景图像区域

    background-clip属性 background-clip属性指定背景绘制区域 语法 background-clip:border-box|padding-box|content-box; b ...

  9. css那些事儿4 背景图像

    background:背景颜色,图像,平铺方式,大小,位置 能够显示背景区域即为盒子模型的填充和内容部分,其中背景图像将会覆盖背景颜色.常见的水平或垂直渐变颜色背景通常使用水平或垂直渐变的背景图像在水 ...

随机推荐

  1. QPainter绘制遇到的小问题

    1.Qt绘图基础 (1)绘图需画笔和画布: QPainter 相当于Qt中的一个画笔,绘制时需要一块画布, Qt中扮演画布角色的组件为QPaintDevice和他的各个子类,如: QWidget, Q ...

  2. [例子] nginx负载均衡搭建及测试

    一.Nginx + Tomcat 负载均衡测试(负载均衡+部分静态图片处理) 环境说明:  nginx+tomcat @ubuntu ok 首先你得有一个Ubuntu或者什么其他的linux. 安装j ...

  3. 黄聪：原生js的音频播放器，兼容pc端和移动端（原创）

    更新时间:2018/9/3 下午1:32:54 更新说明:添加音乐的loop设置和ended事件监听 loop为ture的时候不执行ended事件 1 2 3 4 5 6 7 8 9 10 11 12 ...

  4. SpringBoot集成Atomikos使用Oracle数据库mybatis、jta框架

    项目中需要数据库分布式事物的实现,于是采用了atumikos技术. 因为生产上需要稳定,所以采用了springboot 1.5.9.RELEASE版本. 本文代码gitlab下载地址: https:/ ...

  5. java.util.concurrent包下集合类的特点与适用场景

    java.util.concurrent包,此包下的集合都不允许添加null元素 序号 接口 类 特性 适用场景 1 Queue.Collection ArrayBlockingQueue 有界.阻塞 ...

  6. 数据库乐观锁和悲观锁的理解和实现（转载&总结）

    数据的锁定分为两种,第一种叫作悲观锁,第二种叫作乐观锁. 1.悲观锁,就是对数据的冲突采取一种悲观的态度,也就是说假设数据肯定会冲突,所以在数据开始读取的时候就把数据锁定住.[数据锁定:数据将暂时不会 ...

  7. java 调用c# web api 代码

    上次我们写的.net  web api 给对方公司的java团队调用,他们觉得说java无法调用.net 写的api ,靠居然有这事,索性自己写一个java的demo给他们 使用apache的Http ...

  8. mvc部分视图转换成html字符串

    public static class RenderViewTostring { /// <summary> ///将部分视图转成html 字符串方便我们扩展使用 /// </sum ...

  9. FPM 0.08安装了打不开解决办法

    今天在网上找了FPM软件下载,结果却不能打开,于是到处找资料,终于解决了,呵呵,写下来供大家学习. 用UltraEdit打开FPM.exe,查找"改为8B,F2改为00,然后保存,就可以打开 ...

  10. Pycharm去掉项目所有 # 注释

    通过快捷键ctrl+shift+R 进入 项目全局替换窗口,点击右上角 勾选正则,然后 搜索框输入 (#.*) 即可 ,然后点击 replace all 去掉所有注释