如何通过CSS实现背景图片自动平铺或拉伸至整个屏幕（自适应大小）

默认情况下，通过HTML代码的BODY标签设置好背景图片<body background="x.jpg"> 后，图片会自动横向和纵向平铺。这就会产生一些美观上的问题。 XP人提供CSS代码如下，放在页面头部即可，仅供参考： <style type="text/css"> body { background:url(/img/background.png); background-repeat: repeat-x; background-positon: 100%,100%;} < /style>

续: 有几位朋友说我的这篇文章实在没能解决他们的问题，他们希望的是不考虑自己背景图片的大小，不管多大的屏幕，自己的背景图片自动上下拉伸自己，适应屏幕大小，铺满整个屏幕。所以，我今天再把下面的代码和大家分享。要想实现这样的效果，可以考虑使用滤镜。 <style type="text/css"> body{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘/skin/v2011/images/body.png‘,sizingMethod=‘scale‘); background-repeat: no-repeat; background-positon: 100%, 100%; } < /style>

时间： 2024-10-10 17:49:03

如何通过CSS实现背景图片自动平铺或拉伸至整个屏幕（自适应大小）的相关文章

CSS背景颜色、背景图片、平铺、定位、固定

CSS背景颜色设置 background-color:red;如设置背景颜色为红色: 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:url(图片地址);如设置背景图片 路径不在说明了! CSS背景图片平铺设置(如果不设置图片默认设置为x轴y轴同时平铺即值为repeat) background-repeat:repeat-x;如设置x轴平铺: background-repeat:no-repeat如设置不平铺: CSS背景图片定位设

WPF中背景图片的平铺设置

1 <ImageBrush x:Key="winBackgnd" TileMode="Tile" Viewport="0,0,100,100" ViewportUnits="Absolute" ImageSource="actionPlate.jpg"></ImageBrush> 1.TileMode="Tile"设置使用平铺: 2.ViewPort与Viewpo

img只显示图片一部分 或 css设置背景图片只显示图片指定区域

17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左上角为0,0或0%,0%,右下角为高度和宽度,或100%,100%. clip:rect(300px 100px 300px 0px); 设置显示图片的某个区域,分别是上右下左的顺序设置 部分代码:<style type="text/css">img {position:abs

CSS设置背景图片代码

CSS设置背景图片代码:设置背景图片并不难,但是有时候会忘记url的格式怎么写,之所以写这篇文章,就是让忘记者查询到,寄希望提供一定的帮助.代码如下: background-image:url(mytest/demo/small.jpg) 相关阅读:1.background属性可以参阅background属性用法详解一章节. 2.background-image可以参阅CSS的background-image属性一章节. 原文地址是:http://www.softwhy.com/forum.ph

HTML学习笔记8——CSS设置背景图片

注意点:   background:blue: 与 background-color:blue: 不一样! 一.关于background设置:   1)background:blue:   2)background-image:url(图片名称): 当背景既有颜色,又有图片时,哪个在后面哪个就生效,如下例所示: 此处写了“新宋体”的这张图片作为本文涉及到的背景图片. 以图片为背景时,若图片小于页面大小,则图片会一直重复直到铺满为止: 字在后面时,字生效 1 <!DOCTYPE html> 2

(转)HTML&amp;CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是

jquery后台登录页面背景图片自动轮换登录界面代码

在别的网站上看到的比较炫酷的Web登陆界面,背景图片可以自动轮换.介绍给大家,有兴趣的可以下来改改当做自己系统的登陆界面. 如图: 点击下载源代码 jquery后台登录页面背景图片自动轮换登录界面代码

2018.12.7边界圆角redius,背景图设置,平铺,精灵图,盒子伪类索引

一选择器复习 <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>复习预习</title></head><body> 复习预习 <!-- 1.组合选择器 --> <!-- 群组选择器: div, #div, .div { 该样式块同时控制多个(div, #div, .div) } 每一个选择器位均可以为基础选择

java给图片添加图片水印，设置样式平铺，拉伸

import javax.imageio.ImageIO; import java.awt.*; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; public class ImageUtil { /** * 给图片添加水印 * @param originImgPath 原始图片的路径 * @param targetImgPath 添加水印后图片的保存路径 * @param