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

摘要:
在学习了HTML+CSS一周之后,我发现仍然有一些事情需要记住。俗话说,与其看一千遍,不如手把手递给他们,所以我会记下需要记住的事情。第一个值设置宽度,第二个值设置高度。背景图像的某些部分可能不显示在背景定位区域中。包含将图像扩展到最大大小,使其宽度和高度完全适应内容区域。
在学习了一个星期的 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设置背景图片后图片没有铺满屏幕等》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇MFC日志(2011.4.9)DGL学习(一):使用DGL跑一个最简单的GCN下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

gulp插件的使用方法

gulp插件很多,这里介绍几个比较常用的插件。。。 1.gulp-less:用于把less文件编译成css文件。      因为html文件中不能直接引用less文件(需要导入相关编译js文件配合才行),因此需要想方设法把相应less文件编译成less文件编译成css文件。除了考拉编译外,还可以通过gulp这个自动化构建工具实现less文件的编译。   在...

前端开发知识之前端移动端适配总结

meta标签到底做了什么事情做过移动端适配的小伙伴一定有遇到过这行代码: <meta name="viewport" content="width=device-width, initial-scale=1.0"> 但是,很多小伙伴只是感性的认识:噢,我加了这行代码,然后页面的宽度就会跟我的设备宽度一致。然而,这种理解是很片面的。那么,这句话的...

IIS网站服务器性能优化指南(转载)

原文网址:http://www.phontol.com/20090507_419416_1.htmlWindows Server自带的互联网信息服务器(Internet Information Server,IIS)是架设网站服务器的常用工具,它是一个既简单而又麻烦的东西,新手都可以使用IIS架设一个像模像样的Web站点来,但配置、优化IIS的性能,使得网...

CSS网页排版

自印刷出版物诞生以来,排版就一直是平面设计的基础。 同样,排版在网页设计中也扮演着重要角色。 1.CSS的基本排版技术 1.1 文本颜色 对应网页而言,文本颜色也许是最基本的样式之一。 默认情况下,浏览器把绝大部分文本渲染为黑色。 p { color: #3b4348; } 1.2 字体族 字体族(font-family)属性的值是一个备选字体的...

多行文字内容溢出显示点点点(...)省略号

1、常规css方法——使Firefox以外主流浏览器文字溢出省略号表示 下图为此常用方法在各个浏览器下的表现: IE6浏览器下 IE7浏览器下 chrome谷歌浏览器下 Safari浏览器下 opera浏览器下 Firefox火狐浏览器下 可以看到,仅在Firefox火狐浏览器下无法实现文字溢出省略号表示,其文字直接从中间咔掉了。综...

CSS(十一)-- 手机像素

目录 1.像素css像素:编写网页时,我们所用像素都是css像素 2.视口: 3.移动端的像素 3.1完美视口通过视口来调整像素比 3.2手机端元素布局 使用vw(视口宽度)来布局 使用rem来布局 页面的设计图像素设置 1.像素 屏幕是由一个一个发光的小点构成,这一个个小点就是像素 分辨率:1920*1080 说的是屏幕...