Bagaimana untuk membuat imej latar belakang tidak boleh jubin dengan css-tutorial css-php.cn

Bagaimana untuk membuat imej latar belakang tidak boleh jubin dengan css

WBOY

Lepaskan： 2021-12-03 14:38:54

asal

10092 orang telah melayarinya

Dalam CSS, anda boleh menggunakan atribut "background-repeat" untuk menjadikan imej latar belakang tidak berjubin Atribut ini digunakan untuk menetapkan mod jubin imej latar belakang. repeat:no-repeat;" kepada elemen. ” gaya untuk mengelakkan imej latar belakang daripada dipaparkan berjubin.

Bagaimana untuk membuat imej latar belakang tidak boleh jubin dengan css

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Cara membuat imej latar belakang tidak boleh jubin dalam css

Dalam css, anda boleh menggunakan atribut ulangan latar belakang untuk menetapkan latar belakang imej tidak boleh jubin, atribut ulang latar belakang Tetapkan sama ada dan cara mengulang imej latar belakang. Secara lalai, imej latar belakang berulang secara mendatar dan menegak. Atribut ulangan latar belakang mentakrifkan mod jubin imej.

Nilai atribut adalah seperti berikut:

Bagaimana untuk membuat imej latar belakang tidak boleh jubin dengan css

Mari kita lihat contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    body{ 
background-image: url(1118.02.png);
}</style>
</head>
<body>
    
</body>
</html>

Salin selepas log masuk

Hasil output:

Bagaimana untuk membuat imej latar belakang tidak boleh jubin dengan css

Selepas menambah gaya sehingga:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    body{ 
background-image: url(1118.02.png);
background-repeat: no-repeat;
}</style>
</head>
<body>
</body>
</html>

Salin selepas log masuk

Hasil keluaran:

Bagaimana untuk membuat imej latar belakang tidak boleh jubin dengan css

(Ketahui perkongsian Video: tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk membuat imej latar belakang tidak boleh jubin dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!