CSS에 이미지 파일을 삽입하는 방법-프런트엔드 Q&A-php.cn

CSS에 이미지 파일을 삽입하는 방법

藏色散人

풀어 주다： 2023-01-04 09:38:19

원래의

11460명이 탐색했습니다.

이미지 파일을 CSS로 가져오는 방법: 1. "배경-이미지:url(이미지 주소)" 방법을 통해 가져옵니다. 2. "배경:url(이미지 주소)" 방법을 사용하여 이미지를 가져와 표시합니다. 웹 페이지.

CSS에 이미지 파일을 삽입하는 방법

이 튜토리얼의 운영 환경: Dell G3 컴퓨터, Windows 7 시스템, HTML5&&CSS3 버전.

추천: "css 비디오 튜토리얼"

이미지 파일을 css에 추가

CSS에서는 background-image:url(이미지 주소) 또는 background:url(이미지 주소)을 사용하여 사진을 가져올 수 있습니다. 웹 페이지에 표시됩니다.

<div id="bgimg"></div>
#bgimg {
background: #333 url(图片路径) center center no-repeat;
}

로그인 후 복사

첫 번째 매개변수는 사진 하단 레이어의 배경색입니다. 두 번째 매개변수는 사진 경로입니다. 세 번째 매개변수는 사진의 상단과 하단의 상대적 위치입니다(다른 매개변수는 왼쪽과 오른쪽). 4번째 매개변수는 그림의 왼쪽과 오른쪽의 상대적 위치(상단, 아래쪽), 5번째 매개변수는 그림의 반복(다른 매개변수는 반복, 반복-x, 반복-y)입니다.

예:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>背景图片设置</title>
        <style>
            .demo{
                position:fixed;
                top: 0;
                left: 0;
                width:100%;
                height:100%;
                min-width: 1000px;
                z-index:-10;
                zoom: 1;
                background-color: #fff;
                background: url(1.png);
                background-repeat: no-repeat;
                background-size: cover;
                -webkit-background-size: cover;
                -o-background-size: cover;
                background-position: center 0;
            }
        </style>
    </head>
    <body>
        <div class="demo"></div>
    </body>
</html>

로그인 후 복사

Rendering:

CSS에 이미지 파일을 삽입하는 방법