CSS3中background-orgin实现带相框照片显示效果-案例解析（代码实例）-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

CSS3中background-orgin实现带相框照片显示效果-案例解析（代码实例）

易达

Jun 06, 2020 am 11:05 AM

css3

本文目标：

1、掌握background-origin背景原点的使用

问题：

1、实现以下效果，使用纯DIV+CSS，必须使用背景原点background-orgin

实现效果.png

附加说明：

1、每个相框宽500px,高500px，其中border宽20px,里面文字padding为20，边框的大小为20px

2、里面的照片必须按照背景图片实现

现在来具体操作

1、准备素材：根目录创建images文件夹，把相关素材图片都存放与此，素材有

2、创建好index.html，写好架构，架构如何分析呢

思路分析：

1、目标分成上下2部分，每个部分其实都是显示带相框（div含边框）的照片，所以只要第一个实现完成了，第二部分可以复制

2、但是仔细观察，上面照片和下面照片的显示还是有点不同，第一个div的背景图片是在边框内，而下面div的背景图片是在边框里

3、每个部分其实就是一个DIV,包含边框，然后背景图片是一张照片，里面包含一段字符串，字符串上下包含间距

根据分析，我们得出以下代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景原点制作怀旧照片</title>
</head>

<body>
    <div class="container">
        <div class="photo xtf">
            <div class="content">谢霆锋年轻的样子，一个字帅</div>
        </div>
        <div class="photo zbz">
            <div class="content">张柏芝年轻的样子，一个字美</div>
        </div>
    </div>

</body>

</html>

3、写样式，创建css文件夹，里面新建index.css，里面的样式怎么写了，以下是分析思路

思路分析：

1、.container *

思路分析

1、为了设置容器里的所有元素的公共样式，我们可以将这些公共代码写入.container * 样式内

所以index.css中添加代码如下：

.container *{
    padding:0;
    margin:0;
}

2、.photo 照片

1、根据要求得知，边框20px，虚线显示，转成代码即border-width:20px;border-style: dashed;里面的文字有间距，所以padding:20px,字体加粗font-weight:bold,颜色为白色color:#fff;

宽度总体是500，所以width=500-(2个边框20+20+2个padding20+20)=420,高度也是420，所以width:420,height:420

所以index.css中添加代码如下：

.photo {
    width:420px; 
    height: 420px;
    border-width:20px;
    border-style: dashed;
    padding:20px; 
    font-weight:bold; 
    color:#fff; 
}

3、第一张照片设置

因为这张照片的边框是红色的，所以border-color: red;然后背景是帅哥的照片，然后从效果可以看出虚线之间的颜色为灰色即#ccc，所以 background:#ccc url(../images/xtf.jpg) no-repeat; 最关键的是，它的背景图片是以padding为起点的，所以

background-origin: padding-box;这里一定要注意，为了让background-origin生效，background 必须设置属性no-repeat

所以index.css中添加代码如下：

.xtf{
    background:#ccc url(../images/xtf.jpg) no-repeat; 
    border-color: red;
    background-origin: padding-box;
}

4、第二张照片设置

因为这张照片的边框是橙色的，所以border-color: orange;然后背景是美女的照片，然后从效果可以看出虚线之间的颜色为灰色即#ccc,所以 background:#ccc url(../images/zbz.jpg) no-repeat; 最关键的是，它的背景图片是以边框为起点的，所以

background-origin: border-box;为了让background-origin生效，background 必须设置属性no-repeat

所以index.css中添加代码如下：

.zbz{
    background:#ccc url(../images/zbz.jpg) no-repeat; 
    background-origin: border-box;
    border-color: orange;
}

到此为止，index.css的全部内容如下：

.container *{
    padding:0;
    margin:0;
}
.photo {
    width:420px; 
    height: 420px;
    border-width:20px;
    border-style: dashed;
    padding:20px; 
    font-weight:bold; 
    color:#fff; 
}
.xtf{
    background:#ccc url(../images/xtf.jpg) no-repeat; 
    border-color: red;
    background-origin: padding-box;
}
.zbz{
    background:#ccc url(../images/zbz.jpg) no-repeat; 
    background-origin: border-box;
    border-color: orange;
}

然后将index.css引入index.html中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景原点制作怀旧照片</title>
    <link href="css/index.css" rel="stylesheet" />
</head>

<body>
    <div class="container">
        <div class="photo xtf">
            <div class="content">谢霆锋年轻的样子，一个字帅</div>
        </div>
        <div class="photo zbz">
            <div class="content">张柏芝年轻的样子，一个字美</div>
        </div>
    </div>

</body>

</html>

运行效果如下：

到此为止，我们就实现了全部的需求

其实 background-origin的值除了可以设置成border-box,padding-box，还可以设置成content-box，这样一来，背景原点就是以内容为起点了，我们可以试下

我们修改帅哥谢的照片设置

.xtf{
    background:#ccc url(../images/xtf.jpg) no-repeat; 
    border-color: red;
    background-origin: content-box;/**修改成content-box**/
}

运行结果为：

我们就发现背景图片按照内容为原点显示了

总结：

1、学习了背景原点background-origin的用法，它有3个类型，

一个是border-box:背景图片以边框为起始点

一个是padding-box：背景图片以padding为起始点

一个是content-box：背景图片以内容为起始点

Atas ialah kandungan terperinci CSS3中background-orgin实现带相框照片显示效果-案例解析（代码实例）. 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

Artikel Berkaitan

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?May 09, 2025 am 12:03 AM

Csanimationsarenotinherenthardbutrequirepracticeandundunderpanderofcsspropertiesandtimingfunctions.1) startwithsimpleanimationslikescalingabuttonhoverusingkeyframes.2)

@KeyFrames CSS: Trik yang paling banyak digunakanMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityAndPowerIncreatingSmoothcsSanimations.KeyTrickSinclude: 1) definisiMoothTransitionSbetweenStates, 2) AnimatingMultiplePropertiSti

Kaunter CSS: Panduan Komprehensif untuk Penomboran AutomatikMay 07, 2025 pm 03:45 PM

Csscountersareusedtomanageautomaticnumberinginwebdesigns.1) mereka yang boleh dimanfaatkan, listitems, andcustomnumbering.2) AdvancedusesIndenestedNumberingsystems.3) cabaran yang terkandung di dalam cabaran

Bayang-bayang tatal moden menggunakan animasi yang didorong oleh tatalMay 07, 2025 am 10:34 AM

Menggunakan bayang -bayang skrol, terutamanya untuk peranti mudah alih, adalah sedikit UX yang telah diliputi oleh Chris sebelum ini. Geoff merangkumi pendekatan yang lebih baru yang menggunakan harta animasi-masa. Berikut adalah satu lagi cara.

Mengkaji semula peta imejMay 07, 2025 am 09:40 AM

Mari kita lari melalui penyegaran cepat. Peta imej tarikh kembali ke HTML 3.2, di mana, pertama, peta sisi pelayan dan kemudian peta sisi klien yang ditakrifkan di atas imej menggunakan elemen peta dan kawasan.

Negeri Devs: Tinjauan untuk Setiap PemajuMay 07, 2025 am 09:30 AM

Kajian Negeri Devs kini dibuka untuk penyertaan, dan tidak seperti tinjauan sebelumnya ia meliputi segala -galanya kecuali kod: kerjaya, tempat kerja, tetapi juga kesihatan, hobi, dan banyak lagi.

Apakah grid CSS?Apr 30, 2025 pm 03:21 PM

CSS Grid adalah alat yang berkuasa untuk mewujudkan susun atur web yang rumit dan responsif. Ia memudahkan reka bentuk, meningkatkan kebolehcapaian, dan menawarkan lebih banyak kawalan daripada kaedah yang lebih lama.

See all articles

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

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

Tunjukkan Lagi

Artikel Panas

Bagaimana untuk memperbaiki KB5055523 gagal dipasang di Windows 11?

4 minggu yang laluByDDD

Bagaimana untuk memperbaiki KB5055518 gagal dipasang di Windows 10?

4 minggu yang laluByDDD

<🎜>: Tumbuh Taman - Panduan Mutasi Lengkap

3 minggu yang laluByDDD

<🎜>: Bubble Gum Simulator Infinity - Cara Mendapatkan dan Menggunakan Kekunci Diraja

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Bagaimana untuk memperbaiki KB5055612 gagal dipasang di Windows 10?

3 minggu yang laluByDDD

Tunjukkan Lagi

Alat panas

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini