zoukankan      html  css  js  c++  java
  • CSS_背景属性

    1.背景色

    background-color: red;
    /*设置背景色为红色*/

    2.背景图片

    background-image: url('../img/1.jpg');
    /*设置背景图片(默认平铺)*/
    
    background-repeat: no-repeat;
    /*不平铺*/
    background-repeat: repeat-x;
    /*横向平铺*/
    background-repeat: repeat-y;
    /*纵向平铺*/
    
    background-position: 20px 100px;
    /*设置背景图片位置X轴20px,Y轴100px*/
    background-position-x: 30px;
    /*单独设置x轴位置*/
    background-position-y: 30px;
    /*单独设置y轴位置*/

    3.背景定位

      关键字:

    background-position: top left;
    /*背景图片设置在左上方*/
    background-position: top center;
    /*顶部中间*/
    background-position: center right;
    /*右边中间*/
    background-position: center center;
    /*中心位置*/

      百分比:

    background-position: 50% 50%;
    /*中心位置*/
    background-position: 100% 100%;
    /*右下角*/

     4.设置背景图片大小

    background-size: 320px 460px;
    /*设置背景图片宽度320像素,长度460像素*/

     5.背景圆角

    border-radius: 15px;
    /*圆角半径为15像素*/
    border-top-left-radius: 15px;
    /*只设置左上角圆角半径15像素*/
    border-top-left-radius: 15px 30px;
    /*左上角,圆角半径水平方向15像素,垂直方向30像素*/

    border-radius: 50%;
    /*设置宽高的一半 50% 则为圆*/

     6.阴影

    box-shadow: 20px 20px 50px blue;
    /*第一个值是阴影水平方向上的变异度,第一个值是垂直方向上的偏移,第三个值是阴影的模糊度,第四个值是阴影颜色*/
    box-shadow: 20px 20px 50px blue inset;
    /*inset:表示阴影内射*/
  • 相关阅读:
    mysql max_allowed_packet设置及问题
    mybatis之foreach用法
    uniapp编译小程序分包配置
    鼠标点击页面显示文字
    element ui el-date-picker 判断所选时间是否交叉
    前端处理跨域的几种方式
    uniapp的ajax封装请求
    js获取两个时间差
    vue文件下载功能
    nextTick使用
  • 原文地址:https://www.cnblogs.com/wangdianchao/p/12529079.html
Copyright © 2011-2022 走看看