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

首页

web前端

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：背景图片以内容为起始点

以上是CSS3中background-orgin实现带相框照片显示效果-案例解析（代码实例）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

css怎么隐藏元素但不占空间Jun 01, 2022 pm 07:15 PM

两种方法：1、利用display属性，只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素，只需给元素添加“position:absolute;top:-9999px;”样式。

原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！

css3什么是自适应布局Jun 02, 2022 pm 12:05 PM

自适应布局又称“响应式布局”，是指可以自动识别屏幕宽度、并做出相应调整的网页布局；这样的网页能够兼容多个不同的终端，而不是为每个终端做一个特定的版本。自适应布局是为解决移动端浏览网页而诞生的，能够为使用不同终端的用户提供很好的用户体验。

css3如何实现鼠标点击图片放大Apr 25, 2022 pm 04:52 PM

实现方法：1、使用“:active”选择器选中鼠标点击图片的状态；2、使用transform属性和scale()函数实现图片放大效果，语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

css3动画效果有变形吗Apr 28, 2022 pm 02:20 PM

css3中的动画效果有变形；可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果，animation属性用于设置动画样式，transform属性用于设置变形样式。

css3怎么设置动画旋转速度Apr 28, 2022 pm 04:32 PM

在css3中，可以利用“animation-timing-function”属性设置动画旋转速度，该属性用于指定动画将如何完成一个周期，设置动画的速度曲线，语法为“元素{animation-timing-function:速度属性值;}”。

一文了解CSS3中的新特性 ::target-text 选择器Apr 12, 2022 am 11:24 AM

本篇文章带大家一起深入了解一下CSS3中的新特性::target-text 选择器，聊聊该选择器的作用和使用方法，希望对大家有所帮助！

css3线性渐变可以实现三角形吗Apr 25, 2022 pm 02:47 PM

css3线性渐变可以实现三角形；只需创建一个45度的线性渐变，设置渐变色为两种固定颜色，一个是三角形的颜色，另一个为透明色即可，语法“linear-gradient(45deg,颜色值,颜色值 50%,透明色 50%,透明色 100%)”。

See all articles

热AI工具

热工具

本文目标：

现在来具体操作

总结：

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

安全考试浏览器

SublimeText3 Linux新版

VSCode Windows 64位下载

Atom编辑器mac版下载

SublimeText3 Mac版

热门话题

本文目标：

现在来具体操作

总结：

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

安全考试浏览器

SublimeText3 Linux新版

VSCode Windows 64位 下载

Atom编辑器mac版下载

SublimeText3 Mac版

热门话题

VSCode Windows 64位下载