透明度

opacity

设置整个元素的透明,取值0到1,越小越透明

更多的样式
更多的样式
下面是opacity为0.3
更多的样式

通过rgba设置alpha大小

鼠标样式

可以更换鼠标图标:
更多的样式
url里面填写地址(可以是文件,也可以是外面的),auto意思是如果引用的图片失效了,就用默认的,你也可以改成pointer,那就是url图片失效,最终以pointer形式呈现

请一定要注意了,url引用的图片必须是ico格式的,自己改个后缀的是不行的!!!!!!!!!

更多的样式

这里是一个ico图标的链接

盒子隐藏

1.display:none;不生成盒子,影响后面盒子的排列

2.visibility:hidden;生成盒子,只是视觉上不见了,不影响后面盒子的排列

背景图

img元素是属于html的概念

背景图属于css的概念

1.当图片属于网页内容时,必须使用img元素(用于表现内容)

2.当图片仅用于美化页面时,必须使用背景图(按钮的背景图,用于修饰)

涉及到的css属性:前提是有背景图

background-image: url(地址);

如果当前元素宽高大,那么那张图片就不会断重复
更多的样式

如果不想重复,你可以这样设置
下面表示只重复x方向,y方向不重复
更多的样式
更多的样式

background-size

控制背景图的大小
background-size详解

与object-fit的区别

background-position

设置背景图位置

第一个是水平方向上,第二个是垂直方向上

比如background-position:center top;
就是水平居中
垂直方向紧贴上面

也可以是数值

比如background-position:320px -120px;
背景图距离包含块左边320px,离上边-120px
更多的样式
应用:雪碧图(精灵图)(spirit)
通常我们会把多个照片放在一张图片中,加快浏览器渲染,到时候要用的就使用background-position慢慢调节位置,

更多的样式
我们最终选择出信封
更多的样式

background-attachment

通常用它控制背景图是否固定

比如设为fixed,就是相对可视窗口一直不变,一直固定在那个位置,无论我们怎么滚动鼠标
更多的样式
更多的样式
更多的样式

背景图和背景颜色混合使用

如上面那张图,下面还有一点没填充完,这时候背景颜色也还是有效的
更多的样式
更多的样式

速写(简写)background

上面的代码可以压缩成这样,注意,数值先写background-position的两个数值,然后/加上background-size
更多的样式

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-02-21
  • 2022-12-23
  • 2021-10-16
  • 2021-08-30
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-01-14
  • 2022-12-23
  • 2021-11-11
  • 2021-12-31
  • 2021-09-02
相关资源
相似解决方案