本文已参与「新人创作礼」活动， 一起开启掘金创作之路。
大家好，我是洋哥。今天给大家介绍一下每日一题——用CSS3设置图像效果。
题目要求
请通过HTML和CSS代码来实现如下图所示效果的网页。
建议用时：10-15分钟
难度：简单
知识点考察
这道题主要考察的是用CSS3设置图像效果以及图像背景设置
问题分析
第一，我们从里往外看，最里面的是背景图片可以用background-image即可，这个属性可以放在body里，设置一个body的标签选择器来表示。这个背景图片没有横向或纵向平铺，所以background-repeat用no-repeat，而且图片不随内容二滚动所以background-attachment用 fixed。
第二，我们看中心图片，明显可以看出它的长宽进行了设定，而且插入图片是顶格的，不能做到上下居中所以在插入图片前要加一些<p>或<br/>，在看图片本身黄色边框，所以border-color为yellow，而且是突出型的，所以border-style为outset。
，
相关知识点复习
background-color属性
background-color属性用于设置HTML元素的背景颜色。
background-image属性
background-image属性用于设置HTML元素的背景图像，取值为url（imageurl）或none。
background-attachment属性
background-attachment属性控制背景图像是否随内容一起滚动，取值为scroll或fixed。
background-position属性
background-position属性指定了背景图像相对于关联区域左上角的位置。
background-repeat属性
background-repeat属性用来表示背景图像是否重复显示，取值可以是repeat/repeat-x/repeat-y/ no-repeat。
background属性
background属性与font属性类似，它也是一个组合属性，可用于同时设置background-color、background-image、background-attachment、background-position和background-repeat等背景属性。
边框的不同属性
• border-width（粗细）：设置边框的粗细，可以使用各种CSS中的长度单位，通常用的是像素。
• border-color（颜色）：定义边框的颜色，可以使用各种合法的颜色定义方式。
• border-style（线型）：选择一些预先定义好的线型，如虚线、实线或点划线等。
代码实现
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
img{
height:220px;
width:220px;
border-width:12px;
border-color:yellow;
border-style:outset;
}
body {
background-image: url(images/2.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
</style>
</head>
<body>
<p></p>
<p></p><p></p><p></p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div align="center" > <img src="images/3.jpg"/></div>
</body>
</html>
总结和建议
这道题考察的知识点较为单一，出现在试题上的可能性不大，大家只要有所了解即可。
