Table of Contents
回复讨论(解决方案)
Home Web Front-end HTML Tutorial CSS如何定义背景图片的宽度大小_html/css_WEB-ITnose

CSS如何定义背景图片的宽度大小_html/css_WEB-ITnose

Jun 21, 2016 am 09:35 AM

<style type="text/css">body { background-image: url("image\grn.gif");background-position: 50% 30%; background-repeat:no-repeat;}</style>
Copy after login



这样写能让图片居中但就是不能改变图片大小啊,谁知道教一下


回复讨论(解决方案)

背景图片没办法改变大小

背景图片没办法改变大小
支持

要想改变背景大小,需要采用支持 CSS3的语法
参见
http://dotnet.aspx.cc/article/ac7f6f17-cc42-4b26-9e00-31d5f4671417/read.aspx

把图片PS下或者,定义你的body宽度来控制图片大小

设置一个div有高度和宽度,让图片做div的背景 拉伸填充即可,不知道对你的问题是否满意呢?

设置一个div有高度和宽度,让图片做div的背景 拉伸填充即可,不知道对你的问题是否满意呢?

如何弄呢,说说看怎么写

background-size:90px 10px加了这个CSS3的也不能改变图片啊
能不能直接把代码如何改给我啊,我不太懂CSS啊

我觉得你想要的效果不是要定义背景图的大小,而是背景图显示的大小,background-position这个属性,可以定义你显示背景图的坐标。定义好坐标就能设置展示背景图的大小了

我觉得你想要的效果不是要定义背景图的大小,而是背景图显示的大小,background-position这个属性,可以定义你显示背景图的坐标。定义好坐标就能设置展示背景图的大小了

background-position也不成,它只定位图片的位置,而不能控制显示图片的宽度和高度

背景图片应该不能改变大小,不过你可以把它放在不同的div里

双层显示
底下一层是一个指定大小的图片
上面一层是内容
不过这样的话 就要使用 绝对定位了





大小自己改。。。。。

我觉得你想要的效果不是要定义背景图的大小,而是背景图显示的大小,background-position这个属性,可以定义你显示背景图的坐标。定义好坐标就能设置展示背景图的大小了

自己把图片ps一下嘛

把图片的大小用作图工具改一下啊

最省事的方法还是把图PS一下

背景图片应该不能改变大小,不过你可以把它放在不同的div里

对, 两层就能实现

学习中~~~~~

你要用 Firefox3测试,IE不支持

双层显示加绝对定位:测试成功,所有浏览器都支持

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Mar 04, 2025 pm 12:32 PM

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

How do I use HTML5 form validation attributes to validate user input? How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

How do I use HTML5 form validation attributes to validate user input?

What is the purpose of the <iframe> tag? What are the security considerations when using it? What is the purpose of the <iframe> tag? What are the security considerations when using it? Mar 20, 2025 pm 06:05 PM

What is the purpose of the <iframe> tag? What are the security considerations when using it?

How to efficiently add stroke effects to PNG images on web pages? How to efficiently add stroke effects to PNG images on web pages? Mar 04, 2025 pm 02:39 PM

How to efficiently add stroke effects to PNG images on web pages?

What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

What is the purpose of the <meter> element?

What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

What is the purpose of the <datalist> element?

What is the purpose of the <progress> element? What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

What is the purpose of the <progress> element?

What are the best practices for cross-browser compatibility in HTML5? What are the best practices for cross-browser compatibility in HTML5? Mar 17, 2025 pm 12:20 PM

What are the best practices for cross-browser compatibility in HTML5?

See all articles