首页 > 其他分享 >CSS常用背景属性(背景颜色、背景图片、背景平铺、背景位置、背景附着、背景色半透明、背景属性复合写法)

CSS常用背景属性(背景颜色、背景图片、背景平铺、背景位置、背景附着、背景色半透明、背景属性复合写法)

时间:2023-04-07 09:45:12浏览次数:52  
标签:平铺 repeat 背景 参数 background CSS 属性

本博文记录CSS中比较常用的背景属性,包括背景颜色:background-color、背景图片:background-image、背景平铺:background-repeat、背景位置:background-position和背景附着:background-attachment。同时记录了背景色半透明的写法以及背景属性复合写法

1 常用背景属性

属性 描述 使用方式 说明
background-color 背景颜色 参数;

参数:

transparent(透明,默认)

color(颜色)

background-image 背景图片 background-image: 参数;

参数:

none(无背景图,默认)

url(图片地址)

background-repeat 背景平铺 background-repeat: 参数;

参数:

repeat(横向、纵向均平铺,默认)

no-repeat(不平铺)

repeat-x(横向平铺)

repeat-y(纵向平铺)

background-position 背景位置 background-position: x  y;

x:横坐标,可以使用方位名词或者精确单位

y:纵坐标,可以使用方位名词或者精确单位

方位名词:center、top、bottom、left、right

精确单位:百分数或者由浮点数字和单位标识符组成的长度值

background-attachment 背景附着 background-attachment: 参数;

参数:

scroll(背景图像是随着对象内容滚动,默认)

fixed(背景图像固定)

background-position(背景位置)的参数有两个(x 和 y),需要注意以下几点:

(1)若x和y都是方位名词,则无顺序;

(2)若只指定一个方位名词,另一个省略,则另一个默认为center;

(3)若参数值是精确坐标,则第一个肯定是x坐标,第二个肯定是y坐标;

(4)若参数值是精确坐标且只指定一个数值,则一定是x坐标,另一个默认垂直居中;

(5)若参数值是混合单位,则第一个是x坐标,第二个是y坐标。

背景色半透明

背景色半透明,通过对background属性设置rgba属性值实现。

使用方式:background: rgba(red,green,blue,Alpha);

参数:

参数 范围
red 0-255
green 0-255
blue 0-255
Alpha 0-1

说明:Alpha是透明度,取值范围在0-1,0:全透明,1:不透明。同时,Alpha的值是小数,小数点前的0可以省略。

3 背景属性复合写法

background: 背景颜色 背景图片 背景平铺 背景附着 背景位置;

标签:平铺,repeat,背景,参数,background,CSS,属性
From: https://www.cnblogs.com/detailNew/p/17294954.html

相关文章

  • CSS——@layer规则
    前言之前我们是如何避免引入多方的CSS文件时冲突?注意引入顺序、注意选择器优先级、使用important进行强制覆盖,现在你有了更好的选择@layer,@layer中后声明的优先级高于先声明的;;文档w3|css-cascade-5|MDN|@layer浏览器支持情况目前来看主流的一些浏览器都是支持......
  • 怎么样用css样式实现一个三角形?
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-......
  • 如何将 css 从 Application bundle 资源中剥离出来
    为了提高Angular加载性能,一种思路就是按需加载CSS样式表,而不是把它们打包到applicationbundle中去。Web应用的ApplicationBundle是一个包含所有应用程序代码和资源的文件集合,它们被打包在一起以便于部署和分发。ApplicationBundle通常包含HTML、CSS和JavaScript......
  • spring属性注入常用注解
       ......
  • HTML页面背景渐变
    设置HTML背景颜色渐变可以用很多方法诸如1.用PS画张1400*2000的渐变图片,在BODY中设置为背景图片2.用JS写3.用CSS样式 我这里介绍第3种,-----------------------------直接贴出HTML代码-------------------------------<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional/......
  • WinCE5.0下实现透明背景按钮(.net C#) 个人实验
    参考了WinCE5.0下实现透明背景按钮(.netC#)这篇文章后,本着不模仿的态度去做,结果发现还是原先作者的思路比较好,自己的做法虽然比较简单当时图片得做很多张,效果其实也差不多,而且可维护性并不强,先把我自己做的贴出来。希望自己多敲敲,能找出更简单的方案来目录试图:效果: 直接贴代码:us......
  • 用CSS一分钟写出打字动画
    HTML<div>没有空白的人生,永远都不会有心灵的宁静和精神的愉悦。</div>CSS3*{margin:0;padding:0;box-sizing:border-box;}body{text-align:center;display:flex;justify-content:center;align-items:center;}div{width:390p......
  • 判断Java类的所有属性是否都为null
    为了判断Java类的所有属性是否都为null,你可以编写一个方法来检查每个属性是否为null。以下是一个示例实现:publicstaticbooleanallFieldsNull(Objectobj)throwsIllegalAccessException{for(Fieldfield:obj.getClass().getDeclaredFields()){field.setAc......
  • 二次封装ui组件,如何做到属性,作用域插槽以及 实例方法的穿透使用
    A页面:在使用二次封装的组件<MyInputref='inputRef'v-model='data'placeholder='xxxx'><template#prepend>......</template><template#append>......</template></MyInput>......
  • 实现和CSS一样的easing动画?直接看Mozilla、Chromium源码!
    前言在上一篇丝滑的贝塞尔曲线:从数学原理到应用介绍贝塞尔曲线实现动画时给自己留了一个坑,实现的动画效果和CSS的transition-timing-function:cubic-bezier差别较大,如下图所示,红色为Linear、绿色为CSS的cubic-beizer、蓝色为自己实现的cbezier。本着有坑必填的原则,直接把Mozilla......