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

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

입니다.

• Background -color : 배경색, CSS에서 지원하는 색상 표현 방식을 사용할 수 있습니다.

• Background-image : 배경 이미지( url)

• background-repeat: 배경 반복 여부(반복, 반복 없음, 반복-x, 반복-y)

• 배경 위치: 배경 위치(키워드, 백분율, 픽셀)

• 배경 크기: 배경 크기

• background-origin: 배경의 위치 지정 영역

• background-clip: 배경 그리기 영역

• background-attachment: 배경 이미지를 고정할지 아니면 페이지의 나머지 부분과 함께 스크롤할지 지정합니다

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

하나씩 살펴보겠습니다 -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-box

• 패딩박스

  

• 컨텐츠박스

  

위는 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:

  

패딩 상자:

• 

콘텐츠 상자:

• 

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

다중 배경 이미지

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

이제 위와 같은 효과를 얻으려면 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  定位);

• 

 渐变参数-起点：关键字、百分比、像素、角度（逆时针旋转）

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

 

径向渐变：参考

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

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

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

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

• color：颜色　

• 

• 

• 

• 图中的at前的2个值是渐变大小（就是控制渐变形状的），at后的两个值是圆心

   

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

• 

   

　　

遮罩：-webkit-mask

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!