简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > CSS 튜토리얼 > 본문

CSS에서 배경 스타일 반복 및 반복 안 함을 위한 샘플 코드

黄舟
풀어 주다： 2017-07-27 13:18:43
원래의
3939명이 탐색했습니다.

CSS

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>New Document</title>
    <meta name="generator" content="EverEdit" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <style type="text/css">
        div{
            width:400px; 
            height:200px;
            padding:8px; 
            border:1px solid #96c2f1;
        }
    </style>
</head>
<body>
    <div style="width:200px; height:100px; border: 1px solid #ff0000;">
    </div>
     
    <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff;width:400px">
        <img alt="pic" src="zf.jpg">
    </div>
     
    <div style="background:url(zf.jpg);">
    </div>
     
    <div style="background:repeat-x url(zf.jpg);">
        1.repeat-x url(zf.jpg);
    </div>
     
    <div style="background:repeat-y url(zf.jpg);">
        2.repeat-y url(zf.jpg);
    </div>
     
    <div style="background:repeat-x 0px 50px url(zf.jpg);">
        3.repeat-x 0px 50px url(zf.jpg);
    </div>
     
    <div style="background:repeat 25px 25px url(zf.jpg);">
        4.repeat 25px 25px url(zf.jpg);
    </div>
     
    <div style="background:repeat-x bottom url(zf.jpg);">
        5.repeat-x bottom url(zf.jpg);
    </div>
     
    <div style="background:repeat-x left url(zf.jpg);">
        6.repeat-x left url(zf.jpg);
    </div>
     
    <div style="background:no-repeat url(zf.jpg);">
        7.no-repeat url(zf.jpg);
    </div>
     
    <div style="background:no-repeat top  url(zf.jpg);">
        8.no-repeat top url(zf.jpg);
    </div>
     
    <div style="background:no-repeat left url(zf.jpg);">
        9.no-repeat left url(zf.jpg);
    </div>
     
    <div style="background:no-repeat left 100px url(zf.jpg);">
        10.no-repeat left 100px url(zf.jpg);靠左边，则左为0，x坐标取0，只写上下
    </div>
     
    <div style="background:no-repeat right 100px url(zf.jpg);">
        11.no-repeat right 100px url(zf.jpg);靠左边，则左为0，x坐标取0，只写上下
    </div>
     
    <div style="background:no-repeat 100px bottom url(zf.jpg);">
        12.no-repeat 100px bottom url(zf.jpg);靠下（代表上下），所以只用写左右，100px
    </div>
     
    <div style="background:no-repeat -50px 50px url(zf.jpg);">
        13.no-repeat -50px 50px url(zf.jpg);距离左边-50px，上边50px
    </div>
     
    <div style="background:no-repeat -50px  url(zf.jpg);">
        14.no-repeat -50px 距离左边-50px，上下默认，居中
    </div>
     
    <div style="background:no-repeat -50px  top url(zf.jpg);">
        15.no-repeat -50px  top = no-repeat -50px 0px (距离div边界左边-50，上边0px)
    </div>
     
    <div style="background:no-repeat left  top url(zf.jpg);">
        16.no-repeat left  top (靠左上，=(0px，0px),=只有no-repeat
    </div>
</body>
</html>
로그인 후 복사

의 배경 스타일 반복 및 반복 없음에 대한 샘플 코드

위 내용은 CSS에서 배경 스타일 반복 및 반복 안 함을 위한 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
background
원천：php.cn
이전 기사：CSS에서 !important의 중요성에 대한 자세한 소개 다음 기사：CSS 의사 클래스의 잘못된 방문 스타일에 대한 솔루션
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Javafx에서 인라인 CSS 스타일을 동적으로 수정합니다. 응용프로그램이 최대화되었을 때 창의 배경 이미지를 변경하려고 합니다. 내 배경은 인라인 CSS를 사용하여 설정됩니다. 스타일에 대해 두 개의 다른 변수와 if 문...
에서 2024-04-06 20:57:16
0
1
487
CSS에서 부동 요소를 수평이 아닌 수직으로 쌓는 방법은 무엇입니까? 한쪽에는 기본 콘텐츠가 있고 다른 한쪽에는 추가 콘텐츠가 있는 두 개의 열로 구성된 웹페이지를 만들려고 합니다. 하지만 float 속성을 사용하여 추가 열을 왼쪽...
에서 2024-04-06 20:45:26
0
2
386
흰색으로 설정된 HR 태그가 반투명한 이유는 무엇입니까? 나는 HTML(부트스트랩 포함)과 CSS를 가지고 있습니다. 내 HTML에는 클래스가 있는 <hr> 태그가 있고 CSS에는 테두리 스타일이 있습니다. ...
에서 2024-04-06 16:13:26
0
1
500
숨겨진 측면 패널 표시: 선택됨 애니메이션 햄버거 메뉴를 통해 보기로 전환할 수 있는 탐색 메뉴를 측면 패널에 갖고 싶습니다. JS 없이 CSS만 사용하여 만들고 싶습니다. :checked 의사...
에서 2024-04-06 15:49:33
0
1
319
탐색 모음의 CSS 하단 테두리 탐색 모음이 있고 목록의 항목을 마우스로 가리키면 하단에 빨간색 선을 추가했지만 제목(예: "서비스") 아래로 빨간색 선을 이동하고 싶습니다. ...
에서 2024-04-06 15:04:41
0
2
347
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！