css那些事儿4 背景图像

background:背景颜色,图像,平铺方式,大小,位置

能够显示背景区域即为盒子模型的填充和内容部分,其中背景图像将会覆盖背景颜色。常见的水平或垂直渐变颜色背景通常使用水平或垂直渐变的背景图像在水平或垂直方向平铺,在相邻元素在设置背景进行过度

 

大分小:在css中的图像,如果一张图像太大会造成网络请求下载时间增加,这时候需要考虑将图像进行拆分,即大分小

小拼大:有一些小图标形式的图像被零碎的使用到页面中,这些小图像很小,单个网络请求很快,但是数量达到一定的时候会增加网络请求次数,不利于页面响应速度,因此使用拼图技术

将多张小图像 按照一定的规律和间距进行整合为一张图像,这时候小图标应用改图像为背景,各自设置各自背景大小和位置即可,这样既减小了网络请求,又使得后期图像得到统一的维护。

 

1 背景色与圆角边框

在css2.0时代由于css本身的边框并不支持圆角样式,所以使用背景颜色来模拟实现。由于单个元素的背景图像只有一个,因此需要上下两个元素进行配合,其实现方式主要有

1.1 固定大小

将背景图像进行水平或垂直拆分,然后在容器下边左下角进行背景填充,而左上角使用上边元素背景图像填充,这种方式只适合固定大小,且边框颜色修改得准备多套图像,因此有很多缺点

1.2 水平或垂直拉升

由于固定大小的局限性,因此将图像进行水平或垂直三分拆分,比如在垂直方向则在中间部分进行垂直平铺并重复,这样可以解决在水平或垂直方向拉升,但不能既水平和垂直方向拉升

1.3 水平和垂直拉升

在1.2 的基础上在背景图像右上角进行水平和垂直拆分为四份,并按照这样的方式设置背景,可以做到水平和垂直方向同时拉升,但是任然具有修改颜色的局限性

1.4 山顶脚图片

山顶脚图片其实就是一个三角形图像,将他使用蒙版的形式填充背景,这时候图像本身一部分是透明的,因此背景色也就起到了显示作用

1.5 css3

css3.0的出现让css本身支持圆角边框,且元素可以具有多个背景图像,如{-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:1em};

由于在css3的支持上还存在一些浏览器内核差异性,因此还是需要使用兼容性的 -webkit -moz分别代表了谷歌和火狐的内核

2 边框图像

css3支持边框图像,其具体使用方式为九宫格方式

 

3 特殊字体

由于浏览器能够支持的字体有限,而特殊字体的使用也并非广泛使用,因此制作一张背景图片来显示特殊字体的文本,而真实的文本则隐藏,形如 

<div>

  <span>防护问哦废话</span>

</div>

div span{display:none;} span{background-image:url("dsdsa.png"),none left top;}

 

4 投影

4.1 背景图方式实现投影

不外乎就是准备一张投影图像,使用相对定位或者负边距方式让图像在原有位置上偏移,这样的话也比较麻烦,需要制作相应的投影图像,也增加了图像资源请求,很不好

4.2 css3.0支持投影

box-show:垂直 水平偏移 投影的模糊程度,投影颜色 与边框使用方式类似也需要浏览器内核多支持

5 透明度

在ie时代使用滤镜方式:filter() 或者使用rgba方式增加颜色透明通道,css3 中直接使用alpha即可

 

转载于:https://www.cnblogs.com/rjjs/p/6504505.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/469271.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用Android UEventObserver监听内核event

很多时候我们在框架上层需要知道内核中某些事件的状态&#xff0c;用设备的show属性是可以供上层来查询&#xff0c;但是这需要上层设定一个较耗资源的循环。如果用UEventObserver就可以监听内核event&#xff0c;它是android Java层利用uevent与获取Kernel层状态变化的机制。 …

【Pytorch神经网络实战案例】23 使用ImagNet的预训练模型识别图片内容

1 案例基本工具概述 1.1 数据集简介 Imagenet数据集共有1000个类别&#xff0c;表明该数据集上的预训练模型最多可以输出1000种不同的分类结果。 Imagenet数据集是目前深度学习图像领域应用得非常多的一个领域&#xff0c;关于图像分类、定位、检测等研究工作大多基于此数据…

杂谈转载

一、什么是运行时&#xff08;Runtime&#xff09;? 运行时是苹果提供的纯C语言的开发库&#xff08;运行时是一种非常牛逼、开发中经常用到的底层技术&#xff09;二、运行时的作用&#xff1f; 能获得某个类的所有成员变量能获得某个类的所有属性能获得某个类的所有方法交换…

Linux中的工作队列

工作队列(work queue)是Linux kernel中将工作推后执行的一种机制。这种机制和BH或Tasklets不同之处在于工作队列是把推后的工作交由一个内核线程去执行&#xff0c;因此工作队列的优势就在于它允许重新调度甚至睡眠。 工作队列是2.6内核开始引入的机制&#xff0c;在2.6.20之后…

【Pytorch神经网络实战案例】24 基于迁移学习识别多种鸟类(CUB-200数据集)

1 迁移学习 在实际开发中&#xff0c;常会使用迁移学习将预训练模型中的特征提取能力转移到自己的模型中。 1.1 迁移学习定义 迁移学习指将在一个任务上训练完成的模型进行简单的修改&#xff0c;再用另一个任务的数据继续训练&#xff0c;使之能够完成新的任务。 1.1.1 迁…

linux工作队列

这里对Linux的工作队列(work_queue)不做深层次的挖掘&#xff0c;只对如何使用它以及一些简单的结构做简单地介绍。 Linux源代码(3.0.8)中和工作队列(work_queue)相关的结构主要在 include/linux/workqueue.h这个头文件中&#xff0c;这里就不摘抄了。这里就直接给出例子代码…

【Pytorch神经网络理论篇】 33 基于图片内容处理的机器视觉:目标检测+图片分割+非极大值抑制+Mask R-CNN模型

同学你好&#xff01;本文章于2021年末编写&#xff0c;获得广泛的好评&#xff01; 故在2022年末对本系列进行填充与更新&#xff0c;欢迎大家订阅最新的专栏&#xff0c;获取基于Pytorch1.10版本的理论代码(2023版)实现&#xff0c; Pytorch深度学习理论篇(2023版)目录地址…

linux inputuevent使用

input 输入子系统 在应用层使用的时候&#xff0c;容易出现找不到UEventObserver.java 这时候就要导入jar包 导入classes.jar这个jar包 weiqifaweiqifa-Inspiron-3847:~/weiqifa/tm100$ ls out/target/common/obj/JAVA_LIBRARIES/framework_intermediates/ classes classes…

linq中给字段添加别名

linq 是我们在查询中经常回用到的一种形式,比如我们创建一个类,然后List<添加> 并绑定到表格中public class Modeltest{string id;public string Id{get { return id; }set { id value; }}string pwd;public string Pwd{get { return pwd; }set { pwd value; }}string…

报错 ValueError: too many values to unpack (expected 2)

enc_output,enc_slf_attn self.slf_attn(user_embedding,item_input,item_input,mask slf_attn_mask) 实际上只有一个返回值&#xff0c;但是却写了两个返回值&#xff0c;所以报错。 改正为 enc_output self.slf_attn(user_embedding,item_input,item_input,mask sl…

Python带*参数和带**参数

一、带*形参 1、格式&#xff1a;*形参名&#xff0c;如*args 2、数据类型&#xff1a;元组 3、传参方式&#xff1a;接收任意个位置参数&#xff08;可以不传参&#xff09;。 4、位置&#xff1a;在一个函数里只能有一个&#xff0c;且放在末尾&#xff08;没有带**形参的…

IE浏览器解决无法识别js中getElementsByClassName问题

关于ie浏览器无法识别js中getElementsByClassName问题&#xff0c;现通过以下方法&#xff0c;引用如下js /***打印js对象详细信息*/ function alertObj(obj) {var description "";for ( var i in obj){var property obj[i];description i " " prope…

arduino i2c 如何写16位寄存器_树莓派3B开发Go语言(二)寄存器版本GPIO

作者&#xff1a;爪爪熊链接&#xff1a;https://www.jianshu.com/p/0495c0554a63來源&#xff1a;简书之前将go语言的运行环境给搭建起来了&#xff0c;但是没有开始真正的试试Go 语言操作树莓派硬件的效果。一、树莓派3B硬件介绍树莓派3B采用了博通的BCM2837方案&#xff0c;…

Android aidl在Framework的使用

为何要做这个 我要在framework的PhoneWindowManager.java里面调用LightService.java里面的函数&#xff0c;用来做灯光的提示之类的&#xff0c;为何我要在PhoneWindowManager.java里面加这个呢&#xff0c;这里就不做讨论了&#xff0c;但是直接调用哪些接口是不行的&#xf…

没有理智的欲望会走向毁灭,没有欲望的理智会永守清贫

欲望是人类的本性,哥伦布因为它片帆浮海、横渡大洋发现了美州。理性是人类的禀赋,哥白尼因为它仰望星空、冥想终生提出了日心说。在金融市场上没有理智的欲望会走向毁灭,没有欲望的理智会永守清贫。转载于:https://www.cnblogs.com/timlong/p/6509870.html

【Pytorch神经网络实战案例】25 (带数据增强)基于迁移学习识别多种鸟类(CUB-200数据集)

1 数据增强 在目前分类效果最好的EficientNet系列模型中&#xff0c;EfficientNet-B7版本的模型就是使用随机数据增强方法训练而成的。 RandAugment方法也是目前主流的数据增强方法&#xff0c;用RandAugment方法进行训练&#xff0c;会使模型的精度得到提升。 2 RandAugment…

Capture images using V4L2 on Linux

这文章相当好&#xff0c;没有理由不转载 I have always been using OpenCV’s VideoCapture API to capture images from webcam or USB cameras. OpenCV supportsV4L2 and I wanted to use something other than OpenCV’s VideoCapture API so I started digging up about …

diskgenius 数据迁移_U盘格式化后数据恢复免费方法教程

U盘里的数据一般都很重要&#xff0c;比如论文或者办公文件&#xff0c;而有时候我们会被病毒或者误操作把U盘给格式化了&#xff0c;这时候要怎么恢复U盘里的数据呢&#xff0c;只有一个办法&#xff0c;就是用U盘数据恢复软件&#xff0c;但网上此类软件虽然很多&#xff0c;…

结对编程1

Deadline&#xff1a; 2017-3-15 12:00AM&#xff0c;以博客发表日期为准。 评分基准: 按时交 - 有分&#xff0c;检查的项目包括后文的三个方面 题目要求代码提交博文规范晚交 - 0分迟交两周以上 - 倒扣本次作业分数抄袭 - 倒扣本次作业分数题目描述&#xff1a; 不知道大家是…

【Pytorch神经网络理论篇】 34 样本均衡+分类模型常见损失函数

同学你好&#xff01;本文章于2021年末编写&#xff0c;获得广泛的好评&#xff01; 故在2022年末对本系列进行填充与更新&#xff0c;欢迎大家订阅最新的专栏&#xff0c;获取基于Pytorch1.10版本的理论代码(2023版)实现&#xff0c; Pytorch深度学习理论篇(2023版)目录地址…