cari
Rumahhujung hadapan webtutorial css关于CSS background的使用方法

关于CSS background的使用方法

Jun 20, 2018 pm 03:23 PM
backgroundcss

下面为大家带来一篇CSS background全部汇总。内容挺不错的,现在就分享给大家,也给大家做个参考。

所有背景属性都不能继承。

1. background-color

所有元素都能设置背景颜色。

background-color的默认值是transparent;也就是说,如果一个元素没有指定背景颜色,那么背景就是透明的,这样其祖先元素的背景才能可见。

2. background-image

所有元素都能设置背景图像;

背景图像可以设置多个,中间用逗号隔开;背景图像会层叠,写在前面的层次在上面。

3. background-repeat

repeat(默认)/no-repeat/repeat-x/ repeat-y

4. background-attachment

scroll(默认)/fixed
 
5. background-position

像素法:以图像左上角为起点,第一个值为水平移动的距离,第二个值为垂直移动的距离;若只规定一个值,第二个值默认为50%。

百分比法:百分比同时应用于图像和元素,相应的点重合进行定位。如果只指定一个百分数,意味着垂直方向为50%。

关键字法:top、right、bottom、left、center进行组合定位;若只规定一个值,第二个值默认为center。

注意:background-position可以为负值。

在默认情况下,背景颜色延伸到边框下面,背景图像在padding区域的左上角。

6. background-size

设置背景图像的尺寸;默认值为auto。

像素法:第一个值设置宽度,第二个值设置高度;若只有一个值,第二个值为auto。

百分比法:以父元素的宽度和高度以基准来计算。

关键字cover,不改变图像宽高比例,在水平和垂直方向都铺满整个元素,有可能导致一部分图像溢出。

关键字contain,不改变图像宽高比例,尽可能拉伸,直到某一方向铺满整个元素,有可能导致另一方向没有铺满。

7. background-origin

定义背景图像的初始位置

border-box,边框左上角。

padding-box,padding区域左上角;默认值。

content-box,内容区左上角。

8. background-clip

The CSS3 background-clip property specifies the painting area of the background.

The property takes three different values:

•border-box - (default) the background is painted to the outside edge of the border

•padding-box - the background is painted to the outside edge of the padding

•content-box - the background is painted within the content box

(英文的解释得比较清楚)

(英文都是从W3Schools Online搬运)

关于background-origin和background-clip,它们是相互独立的,互不干扰。

关于background的CSS写法,个人认为应该逻辑明确、层次分明;具体而言:

background定义背景图像,background-color定义背景颜色,background-clip定义背景显示区域。

(个人见解,仅供参考)

Full Size Background Image

If we want to have a background image on a website that covers the entire browser window at all times.

The requirements are as follows:

• Fill the entire page with the image (no white space)

• Scale image as needed

• Center image on page

• Do not cause scrollbars

The following example shows how to do it; Use the html element (the html element is always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust its size with the background-size property:

html {   
     background: url(img_flower.jpg) no-repeat center fixed;    
     background-size: cover;   
 }

小tips:

利用背景图像的水平平铺,实现波浪式的边框效果。

(目前只有想法,还没找到符合需求的图像。)

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

关于CSS3开启硬件加速的使用和陷阱

关于CSS代码如何书写规范

Atas ialah kandungan terperinci 关于CSS background的使用方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
@KeyFrames vs CSS Transitions: Apakah perbezaannya?@KeyFrames vs CSS Transitions: Apakah perbezaannya?May 14, 2025 am 12:01 AM

@keyframesandcsstransitionsdifferincomplexity:@keyframesallowsfordetailedanimationseSseSeSs, whileCstransitionShandlesImplestateShanges.usecsstransitionsforhovereffectsLikeButtonColorchanges, dan@keyframesforintricateanimation.

Menggunakan halaman CMS untuk pengurusan kandungan tapak statikMenggunakan halaman CMS untuk pengurusan kandungan tapak statikMay 13, 2025 am 09:24 AM

Saya tahu, saya tahu: terdapat satu tan pilihan sistem pengurusan kandungan yang tersedia, dan sementara saya telah menguji beberapa, tidak ada yang benar -benar menjadi satu, y ' tahu? Model harga pelik, penyesuaian yang sukar, sesetengahnya akhirnya menjadi keseluruhan &

Panduan Terbaik untuk Menghubungkan Fail CSS di HTMLPanduan Terbaik untuk Menghubungkan Fail CSS di HTMLMay 13, 2025 am 12:02 AM

Menghubungkan fail CSS ke HTML boleh dicapai dengan menggunakan unsur -unsur dalam sebahagian HTML. 1) Gunakan tag untuk menghubungkan fail CSS tempatan. 2) Pelbagai fail CSS boleh dilaksanakan dengan menambahkan beberapa tag. 3) Fail CSS luaran menggunakan pautan URL mutlak, seperti. 4) Pastikan penggunaan laluan fail yang betul dan pesanan pemuatan fail CSS, dan mengoptimumkan prestasi boleh menggunakan preprocessor CSS untuk menggabungkan fail.

CSS Flexbox vs Grid: Kajian KomprehensifCSS Flexbox vs Grid: Kajian KomprehensifMay 12, 2025 am 12:01 AM

Memilih Flexbox atau Grid bergantung kepada keperluan susun atur: 1) Flexbox sesuai untuk susun atur satu dimensi, seperti bar navigasi; 2) Grid sesuai untuk susun atur dua dimensi, seperti susun atur majalah. Kedua -duanya boleh digunakan dalam projek untuk meningkatkan kesan susun atur.

Cara memasukkan fail CSS: Kaedah dan amalan terbaikCara memasukkan fail CSS: Kaedah dan amalan terbaikMay 11, 2025 am 12:02 AM

Cara terbaik untuk memasukkan fail CSS adalah menggunakan tag untuk memperkenalkan fail CSS luaran di bahagian HTML. 1. Gunakan tag untuk memperkenalkan fail CSS luaran, seperti. 2. Untuk pelarasan kecil, css sebaris boleh digunakan, tetapi harus digunakan dengan berhati -hati. 3. Projek besar boleh menggunakan preprocessors CSS seperti SASS atau kurang untuk mengimport fail CSS lain melalui @import. 4. Untuk prestasi, fail CSS harus digabungkan dan CDN harus digunakan, dan dimampatkan menggunakan alat seperti CSSNANO.

Flexbox vs Grid: Sekiranya saya belajar kedua -duanya?Flexbox vs Grid: Sekiranya saya belajar kedua -duanya?May 10, 2025 am 12:01 AM

Ya, youdyhouldlearnbothflexboxandgrid.1) flexboxisidealforone-dimensi, flexiblelayoutslikenavigasiMenus.2)

Mekanik Orbital (atau bagaimana saya mengoptimumkan animasi kerangka utama CSS)Mekanik Orbital (atau bagaimana saya mengoptimumkan animasi kerangka utama CSS)May 09, 2025 am 09:57 AM

Apa yang kelihatan seperti refactor kod anda sendiri? John Rhea memisahkan animasi CSS lama yang dia tulis dan berjalan melalui proses pemikiran mengoptimumkannya.

Animasi CSS: Adakah sukar untuk mencipta mereka?Animasi CSS: Adakah sukar untuk mencipta mereka?May 09, 2025 am 12:03 AM

Csanimationsarenotinherenthardbutrequirepracticeandundunderpanderofcsspropertiesandtimingfunctions.1) startwithsimpleanimationslikescalingabuttonhoverusingkeyframes.2)

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Nordhold: Sistem Fusion, dijelaskan
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers of the Witch Tree - Cara Membuka Kunci Cangkuk Bergelut
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Persekitaran pembangunan bersepadu PHP yang berkuasa

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

Versi Mac WebStorm

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.