문맥 관련성 및 약어뿐만 아니라 사진, 배경 이미지의 차이를 그림 : 전투에 웹 프론트 엔드를 얻기

I. 배경 재산 축약 형식

1.backgound : 배경 색 배경 그림 타일 관련 모드 위치 모드

2.주의 사항 :

모든 값은 생략하지만, 적어도에서 필요로하는

3. 어떤 배경이 연관있다

당신은, 우리는 협회의 방식을 변경할 수없는 그렇다면 기본적으로 배경 이미지, 스크롤 바, 스크롤로 스크롤

4. 형식 :

배경 - 첨부 파일 : 值;

값 범위 :

스크롤 : 기본값은 스크롤 바, 스크롤과 함께합니다.

고정 : 스크롤 바, 스크롤과 스크롤되지 않습니다.

실시 예 5 :

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>d99_background_abbreviation</title>

    <style>

        div{

            width: 1100px;

            height:5000px;

            background:red url("image/snow.jpg") no-repeat fixed center center;/*背景颜色  图片地址  平铺方式  关联方式  定位方式*/

            /*这里的所有值都可以省略,但是至少需要一个*/

            /*background-attachment: fixed;*/

        }

</style>

​

</head>

<body>

<div>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    rhuyrt

</div>

</body>

</html>
web前端开发学习Q-q-u-n: ⑦⑧④-⑦⑧③-零①②,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频

문맥 관련성 및 약어뿐만 아니라 사진, 배경 이미지의 차이를 그림 : 전투에 웹 프론트 엔드를 얻기

둘째, 바로 가기 키

1.bc : 배경 색

2.bi:background-image

3.bgr : 배경 반복

4.ba:background-arttachment

5.bg + : 다섯 개 가지 속성 뒤에 배경 :()

6.bp : 배경 위치

셋째, 배경 이미지 삽입 사진의 차이

div.box$*2

등가로

<div class="box1"></div>

<div class="box2"></div>

2. 구별 :

(1) 배경 이미지 '는 입장을하지 않습니다, 단지 장식입니다 그림 삽입은 위치를 차지합니다

백그라운드 이미지 특성의 위치 (2)의 위치 제어를 수행 할 수 있으며, 이미지의 위치 제어 등록없이 삽입 화상 불량 제어

기업들 때문에 다시 배경 이미지보다 더 강한 (3) 그림 삽입 의미 론적 의미, 당신은 사진을 검색 엔진에 의해 색인하려는 경우,이 그림 삽입을 사용하는 것이 좋습니다, 개발.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>d100_difference_of_img_label_and_background_image</title>

    <style>

        div{

            width:800px;

            height: 500px;

        }

        .box1{

            background-image: url("image/snow.jpg");

        }

</style>

</head>

<body>

<div class="box1">我是一个文字</div>

<hr>

<hr>

<hr>

<hr>

<div class="box2">

    <img src="image/snow.jpg" alt="">

    我是一个文字

</div>

</body>

</html>
web前端开发学习Q-q-u-n: ⑦⑧④-⑦⑧③-零①②,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频

문맥 관련성 및 약어뿐만 아니라 사진, 배경 이미지의 차이를 그림 : 전투에 웹 프론트 엔드를 얻기

추천

출처blog.51cto.com/14592820/2460645