How to add a border to a css background image: First create an HTML sample file; then introduce a background image through "background-image"; and finally set the border through the border attribute.
The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.
Background style
Commonly used background styles
- Background color: background-color
background-color: gray; background-color: #808080; background-color: rgb(128,128,128);
- Background image: background -image
body{background-image: url("images/bg.jpg");}
- Background-image repeat: background-repeat
value | description |
---|---|
repeat | Default. The background image will repeat both vertically and horizontally |
repeat-x | The background image will repeat horizontally |
repeat -y | The background image will repeat vertically |
no-repeat | The background image will be displayed only once |
inherit | Specifies that the setting of the background-repeat attribute should be inherited from the parent element |
- Background image positioning: background-position
background-position attribute value:
①Use keyword: background-position:center left
②Use percentage value: background-position: 50% 50%
③Use length value:background-position:300px 100px
/*背景样式综合使用*/ background: #00ff00 url(image/bg.jpg) no-repeat center;
- Background image fixed: background- attachment
background-attachment property sets whether the background image is fixed or scrolls with the rest of the page.
- scroll: Default value. The background image moves as the page is scrolled.
- fixed: The background image does not move when the rest of the page scrolls.
[Recommended: css video tutorial]
background-size
- Specifies the size of the background image
- Syntax:
background-size: length| percentage| cover| contain;
Description | |
---|---|
Set the width and height of the background image as a length value composed of floating point numbers and units. If only the first value is set, then The second value will be set to "auto" | |
Sets the width and height of the background image as a percentage of the parent element. If only the first one is set value, the second value will be set to "auto" | |
Keep the width and height ratio of the background image itself, and scale the image to exactly cover the defined The area of the background | |
Keep the width and height ratio of the background image itself, and scale the image to a width or height that exactly fits the area of the defined background |
nbsp;html> <meta> <title>背景</title> <style> p{width: 700px;height: 400px;border: 2px solid plum;background-repeat: no-repeat; background-image: url(img/design.jpg);background-size: cover;} </style> <p>图片尺寸</p>background-origin
- Specifies the positioning area of the background image ( Reference position of background-position)
- Syntax:
- background-origin: border-box | padding-box | content-box;
padding-box
nbsp;html> <meta> <style> p{border:10px solid black;padding:35px;background-image:url(img/smiley.gif); background-repeat:no-repeat;background-position:0px 0px;} #p1{background-origin: padding-box;} #p2{background-origin:content-box;} </style> <p>背景图像边界框的相对位置:</p> <p> CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。CSS 在这方面的能力远远在 HTML 之上。CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。CSS 在这方面的能力远远在 HTML 之上。 </p> <p>背景图像的相对位置的内容框:</p> <p> CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。CSS 在这方面的能力远远在 HTML 之上。CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。CSS 在这方面的能力远远在 HTML 之上。 </p>background-clip
- Specifies the background Drawing area (determines where the background is displayed).
- Syntax: background-clip: border-box| padding-box| content-box;
Description | |
---|---|
Crop the background outward from the border area | |
Crop the background outward from the padding area | |
Crop the background outward from the content area |
单位 | 描述 |
---|---|
length | 定义圆角的形状。(圆角半径) |
% | 比百分比定义圆角的形状 |
border-radius
如果要绘制的圆角边框4个角的半径各不相同时,需按左上角、右上角、右下角、左下角的顺序设置每个方向圆角半径的值。
-
border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
(绘制圆角边框的四个角的半径各不相同时,按照上述的顺序)
- 如果省略
bottom-right
,则与top-left
相同。如果省略top-right
,则与top-left
相同。
p{ border-top-left-radius: 0px; border-top-right-radius: 10px; border-bottom-right-radius: 20px; border-bottom-left-radius: 30px; /*上述的四句代码等同于:border-radius:0px 10px 20px 30px;*/ }
border-image
图像边框——border-image 属性
- 可以让元素的长度或宽度处于随时变化的边框统一使用一个图像文件进行绘制。
- 语法:
border-image: url(图像文件的路径) A B C D
ABCD四个参数表示浏览器自动把图像分隔时的上边距、右边距、下边距以及左边距。
border-image 属性是一个简写属性,用于设置以下属性:
值 | 描述 |
---|---|
border-image-source | 定义用在边框的图片的路径 |
border-image-slice | 定义如何裁切背景图像 |
border-image-width | 图片边框的宽度 |
border-image-outset | 边框图像区域超出边框的量 |
border-image-repeat | 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched) |
Shadow
Add one or more shadows to the box - box-shadow property
Syntax: box-shadow: h-shadow v-shadow blur spread color inset;
The above is the detailed content of How to add borders to css background image. For more information, please follow other related articles on the PHP Chinese website!

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Atom editor mac version download
The most popular open source editor
