填充部分元素示例

为某个元素设置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. 2019年3月更新 技术分享 WPF基本界面制作

    1.制作流程1.在vs中建立一个wpf程序2.建立一个主页面(.cs)(注:C#程序每一个页面都由两个文件构成一个xaml一个cs,一个前端文件一个后台文件)3.在主页面中添加按钮,按钮中嵌入图片,这 ...

  2. C++标准模板类库（STL）之queue初步

    1,STL里有些什么? 包括三个内容:容器.迭代器.算法. 2,容器有哪些? 有stack, vector, queue, deque, list, set, multiset, map, multi ...

  3. react优缺点

    优点: 1.面向组件,方便组件的复用. 2.从操作dom改为操作state. 缺点: 1.html和javascript较高耦合,不方便分工开发. 2.当一个页面中两处元素组件有相关性时,父组件会非常 ...

  4. Ubuntu 16.04 安装Go 1.9.2

    系统环境 Ubuntu: 16.04 Go: 1.9.2 安装步骤 $ curl -O https://storage.googleapis.com/golang/go1.9.linux-amd64. ...

  5. ES timeout 的一些笔记

    首先解释下Timeout的作用: 比如,一个search,可能要10分钟才能搜完,那么,es就会等10分钟,直到结果出来.然而,在某些场景下,客户是等不了10分钟的.比如,淘宝搜东西的时候,客户宁可等 ...

  6. Centos7上安装mariadb

    一.查看系统是否安装了mariadb,有的话就删除掉. 1.rpm -qa | grep mariadb 2.rpm -e --nodeps mariadb-libs-5.5.56-2.el7.x86 ...

  7. [论文阅读]MobileNetV2: Inverted Residuals and Linear Bottlenecks

    0.      本文贡献点 本文的主要贡献点是一个构造了一个结构,称为the inverted residual with linear bottleneck.该结构与传统的residual bloc ...

  8. [持续交付实践] Jenkins 中国用户大会参会见闻

    前言 上周日在上海召开了Jenkins中国用户大会(Jenkins User Confluence China),这应该是Jenkins在中国第一次举办吧.Jenkins的创始人Kohsuke Kaw ...

  9. 【python】django上传文件

    参考:https://blog.csdn.net/zahuopuboss/article/details/54891917 参考:https://blog.csdn.net/zzg_550413470 ...

  10. 【亲测可用网上的不靠谱居多】一个完整的用canvas画内容然后保存到本地的例子

    涉及好多个问题 比如保存到本地有黑色背景 怎么用把文字和图 画到画布上 腾讯的东西就是坑多了 直接上代码吧 啥也不说额 pic.wxml <view class='container'> ...