首页 > 其他分享 >CSS3关于背景图片应用的总结

CSS3关于背景图片应用的总结

时间:2022-10-27 20:34:35浏览次数:61  
标签:CSS3 总结 repeat color box padding background 背景图片


背景的 基本属性

background-color(背景颜色)

background-image(背景图片)

background-repeat(背景图片展示的方式)

background-attachment(背景图片滚动还是固定)

background-position(背景图片定位)

简写为:

background: background-color  background-image  background-repeat background-attachment  background-position

1、background-color属性

语法:

background-color:transparent || color

默认是transparent,不设置颜色情况下是透明无色。color可以取颜色名、rgb颜色、hls值、十六进制颜色值、rgba颜色、hsla颜色值。

2、background-image属性

语法:

background-image:none || <url>
默认是none,<url>是图片路径

3、background-repeat属性

语法:

background-repeat:repeat || repeat-x || repeat-y || no-repeat

4、background-attachment属性

语法:

background-attachment:scroll ||  fixed

该属性取值为“fixed”时,一般运用在HTML或body标签上,其他标签达不到固定的效果

5、background-position属性,用来设置背景图片的位置,默认值为(0,0)||(0%,0%)||(left,top)

CSS3中新增的属性:

background-origin:绘制背景图片的起点。用来决定background-position属性的参考原点,决定背景图片的定位起点,默认情况下background-position以元素的左上角为起点。

语法:

background-origin:padding-box || border-box || content-box 

padding-box(padding):默认值,决定background-position起始位置的padding的外边缘(border的内边缘)开始显示背景图片。

border-box(border):决定了background-position起始位置从border的外边缘开始显示背景图片。

content-box(content):决定background-position起始位置从content的外边缘(padding的内边缘)开始显示背景图片。

background-clip:指定背景图片的显示范围,就是背景裁切属性,

语法:

background-clip:border-box || padding-box || content-box

border-box:默认值,元素背景图像从元素的border区域向外裁剪,元素边框之外的背景图片被裁剪掉。

padding-box:元素背景图像从padding区域向外裁剪,元素padding区域之外的背景图片都被裁剪掉。

content-box:元素背景图像从content区域向外裁剪,元素内容区域之外的背景图片被裁剪掉。

background-break:指定内联元素的背景图片进行平铺的循环方式。有三个属性值:

bounding-box:背景图像在整个内联元素中进行平铺

each-box: 背景图像在行内进行平铺

continuous:下一行背景图像紧接着上一行背景图像进行平铺。

background-size:指定背景图片的尺寸大小。

语法:

background-size:auto || <length> || <perentage> || cover || contain

auto :默认值,保持背景图片的原始高度和宽度。

< length >:取具体的整数(px),改变图片的大小。

< perentage >:取百分值,百分值是相对于元素的宽度来进行计算。

cover:把图片放大,铺满整个容器。(可能导致图片失真)

contain:保持图片的本身宽高比例,把背景图片缩放到宽度或者高度正好的背景容器里面。

在CSS3中可以设置多背景图像,语法:

background-image: url1,url2,...,urlN;
background-repeat: repeat1,repeat2,...,repeatN;
background-position: position1,position2,...,positionN;
background-size: size1,size2,...,sizeN;
background-attachment: attachment1,attachment2,...,attachmentN;
background-clip: clip1,clip2,...,clipN;
background-origin: origin1,origin2,...,originN;
background-color: color;


标签:CSS3,总结,repeat,color,box,padding,background,背景图片
From: https://blog.51cto.com/u_12344418/5801931

相关文章

  • CSS3选择器的总结
    CSS3选择器分类通过基本选择器就可以确定HTML树形结构中大多数的DOM元素节点。选择器类型说明*通配选择器选择文档中所有的HTMl元素E元素选择器选择指定类型的HTMl元素#IDI......
  • 单细胞测序数据分析流程与去批次效应总结
    最近在实习,第一个工作是这个,现在这里记录一些随笔,之后会系统总结不同方法的其他流程部分怎么分析可以看20年综述怎么处理这部分。答:   对于Seurat2、Harmony、MNN......
  • 10月27日内容总结——hashlib加密模块和logging、subprocess模块
    目录一、hashlib加密模块1、何为加密2、为什么加密3、如何判断数据是否以加密4、密文的长短有什么意义5、加密算法的基本操作二、加密补充说明三、subprocess模块1、subpro......
  • 二叉树的遍历-----递归和迭代模板总结~超简单。
    先序:左右根中序:左根右后序:左右根先说递归:先序:defpreTraversal(self,root:TreeNode)->List[int]:res=[]defdfs(root):ifroot:......
  • day21.内容回顾及总结
    前端体系结构及知识点一阶段(html+css)基础的页面布局(div弹性盒子布局)seo优化(搜索引擎优化)动画效果html5和css3多端适配(rem)二阶......
  • redis 常用命令总结
                     在Java中操作Redismaven坐标:<dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-da......
  • Vue面试题41:如何监听vuex状态变化?(总结自B站up主‘前端杨村长’视频,仅供自用学习)
    vuex数据状态是响应式的,所以状态变视图跟着变,但是有时还是需要知道数据状态变了从而做一些事情,既然状态都是响应式的,那自然可以使用watch,另外vuex也提供了订阅的API:stor......
  • 背景图片模糊效果
    <html><head><style>html,body{height:100%;width:100%;}body{background-ima......
  • Soring —— 容器总结
    获取bean  容器层次结构图    *BeanFactory是IoC容器的顶层接口,初始化BeanFactory对象时,加载的bean延迟加载 bean相关  依赖注入相关  ......
  • mysqlgroupby语句使用总结
    mysql怎么把groupgroupby语法可以根据给定数据列的每个成员对查询结果进行分组统计,最终得到一个分组汇总表。SELECT子句中的列名必须为分组列或列函数。列函数对于GROUPBY子......