CSS——图片与页面背景

朴灿烈づ我的快乐病毒、 2022-06-03 10:28 219阅读 0赞

【前言】

本篇博客依然是介绍CSS样式，不过今天介绍的是有关图片的样式，以及如何把图片添加到页面当页面背景，并进行相应的调整美化。

【正文】

一、图片样式

1、边框:

主要通过“border”属性为图片添加各式各样的边框，“border-style”定义边框的样式，通过“border-color”定义边框颜色，通过“border-width”定义边框的粗细。

此外还可以用border-top、border-bottom、border-left、border-right单独对边框的上下左右分别进行设计

/*边框的样式*/
    border-style: dotted; /*点划线*/
    border-style: dashed; /*虚线*/
    border-style: solid; /*实线*/
    
    /*边框颜色:border-color属性值可以用英文单词表示，也可以用rgb形式表示、十六进制表示*/
    border-color: blue;
    
    /*边框的粗细*/
     border-width: 2px;

小贴士：也可以将上面的边框的样式、颜色、粗细三种属性合并一下：

border:dashed 2px blue;    /*像素为2px的虚线蓝色边框*/

2、图片缩放：

主要通过“width”和“height”两个属性来实现（其中属性的值可以用：百分数表示相对值，数字+单位表示绝对值）

width:10%; /*——相对宽度，相对浏览器来说*/
    width:10px; /*——绝对宽度*/

3、图片对齐：

①水平对齐：

对齐方式主要分左中右（left、center、right）三种，不能直接通过设置图片的“text-align”属性设置水平对齐，要通过设置其父元素的该属性来实现  
②垂直对齐：

主要通过“vertical-align”属性实现（此属性在IE7和火狐中的显示结果在某些值上略有不同）

![Center][]

二、页面背景

1、添加背景图片：

使用“background-image”属性，直接定义其url值，浏览器会自动将图片覆盖整个页面

background-image:url(图.gif);/*——用CSS样式给页面添加背景图片*/

2、背景图的重复：  
    主要通过“background-repeat”属性设置图片的重复方式

background-repeat:repeat-x;/*水平重复*/
    background-repeat:repeat-y;/*竖直重复*/
    background-repeat:no-repeat;/*不重复*/

3、背景图片位置：

主要通过“background-position”属性设置上中下、左中右模式，也可以用百分比实现图片的精确定位。

background-position属性定位：英文单词、百分数定位、具体数值定位

/*——  背景位置，右下*/
    background-position:bottom right;
    
    /*——背景图片的中心点在水平方向上处于30%的位置，在竖直方向上处于70%的位置。*/
    /*改变浏览器窗口的大小，会发现背景图会进行相应的调整，但始终处于水平方向上30%和竖直方向上70%的位置上*/
    background-position:30% 70%;

4、固定背景图片：

background-attachment:fixed;/*——固定背景图片*/

[Center]: /images/20220603/57a7519e29784eef8b60cd63068b119b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，219人围观）

还没有评论，来说两句吧...

相关阅读

相关【css样式】设置页面背景图片相对于页面居中显示

body { padding: auto; margin: auto; background-image: url();

约定不等于承诺〃/ 2024年03月16日 21:04/ 0 赞/ 27 阅读

相关 CSS背景图片无法显示

问题描述：我在编写网页时，设置了CSS样式来指定背景图片，但是在浏览器中预览时，背景图片却无法显示出来。请问我应该如何解决这个问题呢？解决方案： 1. 检查图片路

清疚/ 2024年02月23日 04:09/ 0 赞/ 68 阅读

相关 CSS_图片篇&背景

一、图片大小 <!DOCTYPE html> <html lang="en"> <head> <meta charset

╰+攻爆jí腚メ/ 2023年10月06日 16:56/ 0 赞/ 37 阅读

相关背景图片固定（背景图片附着）（HTML、CSS）

背景图片固定（背景图片附着）（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

桃扇骨/ 2023年10月03日 12:45/ 0 赞/ 25 阅读

相关背景图片css

.login-container { width: 100%; height: calc(100% - 90px);

╰半橙微兮°/ 2023年07月09日 07:30/ 0 赞/ 24 阅读

相关 css背景图片模糊

移动端开发中经常会碰到图片模糊的需求，比如，下边是网易云音乐歌单详情的效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_t

一时失言乱红尘/ 2023年07月02日 11:26/ 0 赞/ 28 阅读

相关 css背景图片定位

背景图默认平铺： background-repeat: no-repeat;/不平铺/ /repe

川长思鸟来/ 2023年06月11日 05:26/ 0 赞/ 24 阅读

相关页面背景图片滚动

<view class="login"> <view class="bg"> <image mode="aspectFit" src

约定不等于承诺〃/ 2022年12月25日 04:51/ 0 赞/ 361 阅读

相关 html背景图片css怎么添加,css样式怎么插入背景图片？

css样式怎么插入背景图片？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 ![4df3888e01ce34942327a39d

╰+攻爆jí腚メ/ 2022年10月06日 08:51/ 0 赞/ 255 阅读

相关 CSS——图片与页面背景

【前言】本篇博客依然是介绍CSS样式，不过今天介绍的是有关图片的样式，以及如何把图片添加到页面当页面背景，并进行相应的调整美化。【正文】一、图片样式

朴灿烈づ我的快乐病毒、/ 2022年06月03日 10:28/ 0 赞/ 220 阅读