css中如何调整插入背景图片的大小

html-css010

css中如何调整插入背景图片的大小,第1张

CSS2.1 之前是不能设置背景图大小的,CSS3就可以通过background-size来设定图片大小,可以是像素或者是百分比。

例如background-size:100px 200px表示把背景图片大小调整为100x200px。

要把图像应用成为背景,要使用 background-image这一 属性。当background-image 属性默认值是 none的时候,这表示背景上没有放置任何图像。如果需要设置一个背景图像,必须为这个属性设置一个 URL 值。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

html设置图片大小:在img标签上设置图片大小、或者使用css样式控制图片大小。操作方法如下。

设备:戴尔Inspiron15

系统:Win10

软件:visual studio code1.55.2

1、首先打开电脑之后,如下图所示,新建一个“cs”文件夹,在文件夹中存储一张图片用来做演示。

2、接着打开visual studio code点击“文件”-“打开文件夹”,选中上一步建立好的“cs”文件夹。

3、然后点击“cs”右侧的“新建文件”图标,创建一个“1.html”文件,在空白html文件中输入一个英文“!”按Tab键填充html基本代码。

4、接着在body中插入img标签,alt规定图像的替代文本,src规定显示图像的URL。

5、然后在img标签上使用width属性设置图片宽度、height属性设置图片高度。

6、最后在title标签下面插入style标签(如下图所示),接着在style标签中编辑css样式,如下图所示,img{width:100pxheight:auto},这里表示把图片设置为100px宽、auto表示高度根据图片比例自适应。设置图片大小就完成了。

需要准备的材料分别有:电脑、chrome浏览器、html编辑器。

1、首先,打开html编辑器,新建一个html文件,例如:index.html。

2、其次,在index.html中的<style>标签中,输入css样式代码:body {background: url(image7.jpg) no-repeatbackground-size: 250px}。

3、最后,浏览器运行index.html页面,此时用CSS强制了图片占用250px宽度的大小并且是等比例自动缩放。