zoukankan      html  css  js  c++  java
  • HTML + CSS 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;             //虚线轮廓
    
    先写到这里,如果有需要会继续添加
  • 相关阅读:
    nginx 服务企业应用
    3D模型展示以及体积、表面积计算
    php实现MySQL读写分离
    three.js实现3D模型展示
    thinkphp5.1+think-queue
    GIT记住远端仓库地址密码
    php实现采集(仅做参考)
    phpStudy集成环境apche+openssl配置本地https
    HTTP与HTTPS区别
    在父页面用Iframe加载子页面时,将父页面的title替换成子页面title
  • 原文地址:https://www.cnblogs.com/Lay0us/p/12040150.html
Copyright © 2011-2022 走看看