>웹 프론트엔드 >CSS 튜토리얼 >CSS 배경 관련 속성에 대한 자세한 소개

CSS 배경 관련 속성에 대한 자세한 소개

高洛峰
高洛峰원래의
2017-03-17 10:10:261864검색

내 생각에는 CSS에서 배경을 제어하는 ​​배경이 하나뿐이지만 배경은 다음을 포함하는 복합 속성

입니다.

이 외에도 배경, 그라데이션, 마스크 등도 배경에 넣어보겠습니다.

하나씩 살펴보겠습니다 -0-.

처음에 말했듯이 저는 오랫동안 배경은 배경이라는 단어로만 생각했어요. 저는 항상

 .p{
 background: #000 url("1.jpg") no-repeat left center;/*颜色、图片、是否平铺、定位*/
 }

라고 쓰거든요. 다들 저처럼 쓰는지 모르겠네요. 배경색, 배경 이미지, 중복 여부, 위치 지정 등 4가지 속성을 순차적으로 작성하는 방식은 매우 간단합니다.


기타 속성은 다음과 같습니다

Background-origin: 값은 키워드, 3개의

.div{
        width: 400px;
        height: 200px;
        padding: 20px;
        border:10px solid rgba(255,255,255,.2);
        background: #000 url("1.jpg") no-repeat;
        background-origin:border-box;
        /*background-origin:padding-box;*/
        /*background-origin:content-box;*/
    }
  • border-boxCSS 배경 관련 속성에 대한 자세한 소개

  • 패딩박스

    CSS 배경 관련 속성에 대한 자세한 소개

  • 컨텐츠박스

    CSS 배경 관련 속성에 대한 자세한 소개

위는 background-origin의 효과인데 제가 원하는 것과는 조금 다른 것 같습니다. padding과 content중 하단과 우측에 아직 배경 이미지가 있고, 배경색(#000)이 들어간 것 같습니다. 작동하지 않았습니다

추가: 배경 위치 지정의 시작점을 결정할 수 있습니다.

Background-origin: 값은 키워드이고

.div{
    width: 400px;
    height: 200px;

    padding: 20px;
    border:10px solid rgba(0,0,0,.1);

    background:#000 url("1.jpg") no-repeat;
    /*background-clip:border-box;*/
    /*background-clip:padding-box;*/
    background-clip:content-box;
}

  • border-box:

    CSS 배경 관련 속성에 대한 자세한 소개

  • 패딩 상자:
  • CSS 배경 관련 속성에 대한 자세한 소개

  • 콘텐츠 상자:
  • CSS 배경 관련 속성에 대한 자세한 소개

  • 위는 background-clip의 효과인데, background-origin보다 조금 더 좋은 느낌이군요, 하.

다중 배경 이미지

과거에는 컨테이너(p)에 다층 배경을 구현하려면 컨테이너에 하위 요소를 몇 개 더 작성한 다음 위치를 지정하면 되었습니다. 하위 요소. 간단하게 하려면 디자이너가 계정 다이어그램을 제공하고 직접 붙여넣도록 하세요(제가 자주 하는 일이죠, 하하).

CSS 배경 관련 속성에 대한 자세한 소개이제 위와 같은 효과를 얻으려면 p 하나면 충분합니다. 링크: 데모

nbsp;html>


    <meta>
    <title>Title</title>
    <style>
        .div{
            width: 240px;
            height: 150px;
            border:1px solid #000;
            
            background: url("1.jpg") no-repeat left top,
                        url("2.jpg") no-repeat left bottom,
                        url("3.jpg") no-repeat right bottom;
            background-size:100px auto, 100px auto, 100px auto;
        }
    </style>


<div></div>



多个背景

그라디언트: 배경 이미지에 적용

선형 그라디언트:

    -webkit-linear-gradient (시작점, 색상1, 색상2,..., 색상N);
  • -webkit-linear-gradient(起点[方向],color1 定位,color2 定位,...,colorN  定位);

    • CSS 배경 관련 속성에 대한 자세한 소개

 渐变参数-起点:关键字、百分比、像素、角度(逆时针旋转)

 渐变重复:-webkit-repeating-linear-gradient(起点,color1 定位,color2 定位,...,colorN  定位);

CSS 배경 관련 속성에 대한 자세한 소개

CSS 배경 관련 속성에 대한 자세한 소개

 

径向渐变:参考

  • radial-gradient(position,shape,size,color);

    • position:定义径向渐变的圆心位置

    • shape:定义径向渐变的形状

    • size:确定径向渐变的结束形状大小

    • color:颜色 

  • CSS 배경 관련 속성에 대한 자세한 소개

  • CSS 배경 관련 속성에 대한 자세한 소개

  • CSS 배경 관련 속성에 대한 자세한 소개

  • 图中的at前的2个值是渐变大小(就是控制渐变形状的),at后的两个值是圆心

     

 重复径向渐变:repeating-radial-gradient

  • CSS 배경 관련 속성에 대한 자세한 소개

     

  

遮罩:-webkit-mask

div{
    /* 要配合背景使用 */
    background:url("1.jpg") no-repeat 50% 50%/100% 100%;
    -webkit-mask: url(1.png) 30px 10px/10px 10px;
}

CSS 배경 관련 속성에 대한 자세한 소개

nbsp;html>


    <meta>
    <title>Title</title>
    <style>

        body{
            background: #000;
        }
        div{
            width: 400px;
            height: 300px;
            border:12px solid #000;/* 没起作用 */
            background:url("1.jpg") no-repeat 50% 50%/100% 100%;
            -webkit-mask: url(1.png) 30px 10px/10px 10px;
        }
    </style>


<div></div>



 图片大小:background-size

  • 关键字:cover 等比缩放,保证填满容器,(配合背景定位,就实现图片居中了)

  • 关键字:contain 等比缩放,容器可能会有缝隙

  • 数值:x-控制图片宽, y-控制图片高

 

 

위 내용은 CSS 배경 관련 속성에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.