当前位置:首页 > Web开发 > 正文

HTML + CSS CSS设置背景图片后图片没有铺满屏幕等

2024-03-31 Web开发

标签:

在15PB学习了一个星期的 HTML + CSS之后,发现还有一些东西需要去记忆,俗话说的好:
眼过千遍不如手过一遍,这就把需要记忆的东西记下来。
很多时候我们遇到的情况是:
设置背景图片background-image:url(xxx.jpg); 如果背景图片不平铺就达不到全屏的效果,如果平铺了之后效果就有些差强人意,这时候CSS这个属性就派上用场了
background-size: cover; //把背景图像扩展至足够大,,以使背景图像完全覆盖背景区域。 这个属性有四个值: length 设置背景图像的高度和宽度,第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto" percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。 cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 还有一些属性和值是需要经常用但是不易记住的属性 letter-spacing //设置字符间距 text-decoration //文本的装饰 例如:下划线 text-shadow //文字阴影 text-indent //首行缩进 font-family //设置字体 font-style //斜体文本 font-weight //文本粗细 列表样式 list-style-type //列表项目外观 list-style-position //列表符号的位置 list-style-image //把图像设置为列表项目的标记 伪类选择器 a:link //未访问的链接 a:visited //已访问的链接 a:hover //鼠标移动上去 a:active //鼠标点上去不放 :focus //选中那块标签的颜色 :first-child //选择元素第一个子元素 :last-child //选择某个元素最后一个子元素 :nth-child(x) //选择某个元素的第x个元素 伪元素选择器 ::before //在内容之前插入新内容 ::after //在内容之后插入新内容 ::first-line //选择指定选择器首行 ::first-letter //选择文本的第一个字符 如果是div溢出需要用到overflow属性,该属性值如下: visible //默认值,超出内容不会被修剪呈现在元素外 hidden //超出部分被隐藏 scroll //不论是否需要一直显示滚动条 auto //按需显示滚动条 边框 outline:dashed; //虚线轮廓 先写到这里,如果有需要会继续添加

HTML + CSS CSS设置背景图片后图片没有铺满屏幕等

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/40432.html