Web前端，CSS背景图片大小、文字阴影、盒子阴影、过渡
前言
持续学习总结输出中，今天分享的是Web前端，CSS背景图片大小、文字阴影、盒子阴影、过渡
背景图片大小
background-size:宽度 高度;
设置背景图片的大小
| 取值 | 场景 |
|---|---|
| 数字+px | 简单方便，常用 |
| 百分比 | 相对于当前盒子自身的高度百分比 |
| contain | 包含，将背景图片等比例缩放，直到不会超出盒子的最大 |
| cover | 覆盖，将背景图片等比例缩放，知道刚好填满整个盒子没有空白 |
background连写拓展
background:color image repeat position/size;
注意点：
• background-size和background连写同时设置时，需要注意覆盖问题
解决:
- 要么单独的样式写连写的下面
- 要么单独的样式写在连写的里面
文字阴影
text-shadow
给文字添加阴影效果，吸引用户注意
| 参数 | 作用 |
|---|---|
| h-shadow | 必须，水平偏移量。允许负值 |
| v-shadow | 必须，垂直偏移量。允许负值 |
| blur | 可选，模糊度 |
| color | 可选，阴影颜色 |
注意:
• 阴影可以叠加设置，每组阴影取值之间以逗号隔开
盒子阴影
box-shadow
给盒子添加阴影效果，吸引用户注意
| 参数 | 作用 |
|---|---|
| h-shadow | 必须，水平偏移量。允许负值 |
| v-shadow | 必须，垂直偏移量。允许负值 |
| blur | 可选，模糊度 |
| spread | 可选，阴影扩大 |
| color | 可选，阴影颜色 |
| inset | 可选，将阴影改为内部阴影 |
过渡
transition
让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
| 参数 | 取值 |
|---|---|
| 过渡的属性 | all：所有能过渡的属性都过渡、具体属性名如：width 只有 width有过渡 |
| 过渡的时长 | 数字 + s （秒） |
注意点:
- 过渡需要:默认状态 和 hover状态样式不同，才能有过渡效果
- transition属性给需要过渡的元素本身加
- transition属性设置在不同状态中，效果不同的
.给默认状态设置，鼠标移入移出都有过渡效果
.给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
总结
最后分享一句话：
抱怨是在讲述你不要的东西，而不是你要的东西。
《不抱怨的世界》
本次的分享就到这里了！！！
欢迎在评论区留言讨论！！！
Web前端，CSS背景图片大小、文字阴影、盒子阴影、过渡相关推荐
- css背景图片、圆角、盒子阴影、浮动
一.css背景图片 1.概述 背景是css中一个重要的的部分,也是需要知道的css的基础知识之一.这里主要介绍有关背景图片的5种常见属性,分别是: (1). background-color: rgb ...
- web前端基础——背景图片
作用:设置背景图片大小 语法:background-size: 宽度 高度 取值: 取值 场景 数字+px 简单方便,常用 百分比 相对于当前盒子自身的宽高百分比 contain 包含,将背景图片等比 ...
- css圆角边框、文字、盒子阴影
文章目录 圆角边框.文字.盒子阴影 圆角边框 盒子阴影 文字阴影 圆角边框.文字.盒子阴影 圆角边框 css3中新增了圆角边框样式 border-radius(半径)属性用于设置元素的外边框圆角 参数 ...
- CSS背景图片，文字设置背景
关于CSS里的背景图片 CSS背景 叠加背景图片: 背景图片尺寸: 文字设置背景: CSS背景 叠加背景图片: background-image 可以为一个元素添加多个背景,第一幅图片最靠近观看者 # ...
- HTML+CSS 背景图片大小设置问题(background-size)
记得我刚开始学的时候,做作业很多次都遇到背景不能铺满问题. background-size 属性规定背景图像的尺寸 background-size: 背景图片宽度 背景图片高度; 单位: 长度|百分比 ...
- html 文字在背景图片上,如何让文字作为CSS背景图片显示
在实际开发中,有时候希望文字内容可以作为背景图片显示,一方面是希望利用背景图片的优势,例如可以平铺,另外一方面是常见的替换元素不能使用伪元素创建文字,此时只能寄希望与背景图. 关键如何把文字变成背景图 ...
- css如何让背景图片平铺？css背景图片平铺四种方式介绍-前端教程
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
- 小兔鲜项目搭建-精灵图、背景图片大小、盒子阴影、过渡
1.1精灵图: 使用步骤: 1.创建一个盒子,设置盒子的尺寸和小图尺寸相同 2.将精灵图设置为盒子的背景图片 3.修改背景图位置 精灵图的标签一般都用行内标签,如span,b,i: 背景图位置属性:b ...
- 怎么修改背景图片大小的HTML代码,css如何改变背景图片大小？
我们现在经常会用到CSS,在编写过程中,会遇到CSS背景图像大小设置的问题.那么css如何改变背景图片大小?下面本篇文章就来给大家介绍一下,希望对大家有所帮助. 在CSS中,想要改变背景图片的大小,可 ...
最新文章
- 补3.31 部分成果以及上周的工作
- 基于jQuery的图片异步加载和预加载实例
- CODE FESTIVAL 2017 qual B
- Caffe部署中的几个train-test-solver-prototxt-deploy等说明 （一）
- 【iOS XMPP】使用XMPPFramewok（一）：添加XMPPFramework（XCode 4.6.2）
- Boost::context模块fiber的无限循环测试程序
- C++指针和数组的区别（不能混用的情况）
- des加密算法python代码_python des加密算法代码(pydes模块加密)
- leetcode103. 二叉树的锯齿形层次遍历
- IOC容器（底层原理解读）
- mysql 5.7 源码编译安装_mysql-5.7.*源码编译安装
- java可以做网页吗_如果我用java 只会做网页,那么我会不会被淘汰?
- Java-线程中sleep()、wait()和notify()和notifyAll()、suspend和resume()、yield()、join()、interrupt()的用法和区别
- ubuntu18.04,Linux使用远程连接工具连接失败解决
- 计算机组成知识试题及答案,2015年计算机考研：计算机组成原理试题六【附答案】...
- BERT 的演进和应用
- 微软一个关于team editon vs 2005文章的集锦页面
- DB2数据库v10.5安装过程
- druid源码学习2-DruidDataSource.DestroyTask
- 使用Hypothesis生成测试数据