【CSS】【14】CSS中使用背景图像

默认情况下背景图像会自动向水平和竖直两个方向平铺，如果不希望不平铺，或者只希望沿一个方向平铺，可以使backgroud-repeat属性来控制，该属性可以取以下4种之一

repeat：沿水平和竖直两个方向平铺，也是默认值；

no-repeat：不平铺，只显示一次；

repeat-x：只沿水平方向平铺；

repeat-y：只沿竖直方向平铺；

回到《【CSS】【6】CSS学习的一些前提》的登录界面，里面只有一个背景图像：

而我们的页面中却是整张都是这种图像，怎么做到的呢？

一、HTML部分

这个HTML页面的body部分是一个空内容，即无内容，此时的页面效果如下：

二、定义CSS部分内容

body
{
background-image:url(login_bg.gif);
}

引用背景图片，缺省值为repeat，沿水平和竖直方向平铺，效果如下：

三、只水平平铺

body
{
background-image:url(login_bg.gif);

bacground-repeat:repeat-x;
}

效果如下：

四、只竖直平铺

body
{
background-image:url(login_bg.gif);

bacground-repeat:repeat-y;
}

效果如下：

五、不平铺

body
{
background-image:url(login_bg.gif);

bacground-repeat:no-repeat;
}

效果如下：

六、HTML部分

在实际应用过程中我们经常会遇到如下问题，背景图像如下：

这是一个渐变过程的图版本，若使用CSS直接引入，则会出现如下效果：

body
{
background-image:url(login_bg.png);

}

可间明显有一个重复的过程，这样的页面背景站在美观的角度上肯定是不被接受的，该如何办呢？一般的解决办法就是只使它在水平方向平铺，然后背景色使用与该图像下边颜色一样的值进行延伸，如下图片白色就一直向下延伸下去了，根本感知不到图片的大小：

图片的高度是到这里的哟~

【CSS】【14】CSS中使用背景图像相关推荐

css如何翻转背景图像,使用CSS反转父元素的背景图像
我在这里遇到了一个难题(我认为).假设以下HTML:使用CSS反转父元素的背景图像与它定义了以下CSS: #page { background: url("some-image.png&q ...
php引用母版页,在asp.net中设置背景图像（母版页）
我是新来的asp.net.而我在设置背景图片时遇到了麻烦.以下是主页面源代码:在asp.net中设置背景图像(母版页) Tracker Home LINK LINK LINK LINK SOME LA ...
html中如何让图片斜显示,如何在偏斜层(CSS)中扭曲背景图像？
我正在尝试显示像这样的个人资料照片/ – /(斜线表示使用skewX的斜线,连字符表示水平对齐的背景图像). 问题是这段代码也会扭曲背景图像: .photo { transform: skewX(35 ...
html中设置背景图像填充,CSS-定位背景图像，添加填充
CSS-定位背景图像,添加填充这个问题在这里已有答案: CSS:背景图片和填充 8个答案我想将背景添加到div,位置居中,但 ...
python设置画布背景图_如何使画布中的背景图像随窗口展开？
我正在尝试设置天气应用程序的背景图像,我尝试使用画布,但图像并没有随着窗口展开,只有当我单击"搜索"以查看结果时,它才会展开,标签会显得凌乱,就像我使用网格一样有人能帮我修好这个 ...
Android中使用xml处理图片,Android布局 – 在xml中偏移背景图像
我有一个大的png,我想用它作为不同布局的背景,但是偏移它以便我可以有不同的部分显示(很像你可以在CSS中),最好是在xml中. 我的活动主要布局包含以下xml: android:layout_wid ...
java图像在背景图移动_java – 在Swing中移动背景图像
你好我是编程新手,我们有一个项目.我们创建了一个简单的赛车游戏,背景动人,但我坚持我的代码,我不知道该怎么做.游戏开始时我需要一个移动的背景请有人帮助我.我在求T_T 这是我的代码: public c ...
python中pygame背景颜色为啥没生效_如何更改pygame中的背景图像？
首先,这里是带有固定缩进的相关代码其次,我假设gameDisplay = pygame.display.set_mode((800, 600)).在def bathRoom(): bathroom = ...
W3school：CSS基础：CSS注释、颜色（颜色、RGB、HEX、HSL）、背景（背景、背景图像、背景重复、背景附着、简写背景属性）
W3school:CSS基础:CSS注释.颜色(颜色.RGB.HEX.HSL).背景(背景.背景图像.背景重复.背景附着.简写背景属性) 一.CSS注释 1.注释用于解释代码,以后在您编辑源代码时可能 ...

【CSS】【14】CSS中使用背景图像

【CSS】【14】CSS中使用背景图像相关推荐

最新文章

热门文章