使用CSS为图片设置背景图操作

为图片设置背景图片,是一个非常搞的实例。这句话或许就感觉有点好玩。我们为以img标签引入页面的图片设置背景图片。

CSS的功能是非常强大的,对于元素的表现以及页面的布局,都提供了非常强大的功能,这主要在于我们灵活的运行,在这方面提供了丰富且富含价值的各种教程与信息。对于图片的使用,其实更多的是在内容层。根据WEB标准的思路,表现层的图片,已经都被分离到CSS中去了。只有作为内容的图片才能以IMG标签插入在页面中,这也是一直强调的语义。

  为图片设置背景图片,是一个非常搞的实例。这句话或许就感觉有点好玩。我们为以img标签引入页面的图片设置背景图片。这样的应用范围或许并不大,但可以锻炼你的思路,让你理解元素在HTML与CSS中的意义与灵活性。
我们看下面的代码。

  使用CSS为图片设置背景图操作
  这是以img标签将图片引入到页面中。

  我们再编写CSS。

img {
display:block;
width:443px;
height:60px;
padding-bottom:10px;
background:url(jb52bg.jpg) no-repeat left bottom;
}
  将img元素转换为块元素,设置宽和高。设置下侧的内边距为10px。为背景图片显示出来预留一定的空间。最后定义背景图片即可。
   由此小实例,可以看出CSS的灵活和强大的功能。

以上就是使用CSS为图片设置背景图操作的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3122184.html

(0)
上一篇 2025年3月29日 18:08:53
下一篇 2025年3月29日 18:09:05

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 解决CSS在浏览器不兼容的问题

    浏览器的不兼容,大家肯定都是深恶痛绝的,往往我们只是去做修补,却忘了更重要的事情,那就是追溯根源,避免类似的不兼容再次出现。 在下不才,归纳几点html编码要素,望能指点各位:1.文字本身的大小不兼容。同样是font-size:14px的宋…

    编程技术 2025年3月29日
    100
  • css中属性值继承介绍

    这篇文章主要介绍了css中属性值继承,介绍了属性的可以继承和不可继承,同时分析了继承的局限性以及是否可以取消等等,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。 继承:html元素可以从父元素那里继承一部分css属性,…

    编程技术 2025年3月29日
    100
  • CSS在网页设计中的使用方法及其特点

      给初学者介绍一下css特点及如何在网页中使用已经设置的css。   W3C(The World Wide Web Consortium)把动态HTML(Dynamic HTML)分为三个部分来实现:脚本语言(包括JavaScript、V…

    编程技术 2025年3月29日
    100
  • css技巧之链接的标注

          css越来越广泛的被运用,层叠样式表拥有很多表格布局所没有的优势,首先从布局或者页面的设计与出现在页面中的信息中作严格的分离,从而让页面的设计能够很容易被改变,仅用一个css文件更换另一个。随之很多的技巧被应用者所重用,减少一定…

    编程技术 2025年3月29日
    100
  • css实现进行中打点效果代码分享

    这篇文章主要介绍了css进行中打点效果,附上代码让大家更简单易懂得看明白样式设置,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。 代码如下: nbsp;html>进行中…dot { display:inlin…

    编程技术 2025年3月29日
    100
  • CSS3中media媒体查询器使用详解

    最近几年随着响应式布局的发展,一次开发多次使用,自适应屏幕的响应式网站的需求越来越多。但是怎样使得网站能自适应屏幕呢?这里就需要提到一个css3里面新增的技术了-media媒体查询器。 那么什么是media媒体查询器呢? Media媒体查询…

    编程技术 2025年3月29日
    100
  • 关于CSS布局技巧的总结分享

    单列布局 水平居中 父元素text-align:center;子元素:inline-block; 优点:兼容性好; 不足:需要同时设置子元素和父元素 nbsp;html>水平居中1 .parent { width: 500px; he…

    编程技术 2025年3月29日
    100
  • 利用html+css3制作心的跳动动画

    nbsp;html>            模拟心的跳动 * { margin: 0; padding: 0;}body { background-color: #D4CECE;}.big { width: 200px; height…

    编程技术 2025年3月29日
    100
  • 总结解决css边距重叠的方法

    本篇文章主要介绍了详解css边距重叠的几种解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 今天整理了一下用css防止边距重叠的几种方法 先假设一组dom结构          登录后复制 通常情况下,如…

    编程技术 2025年3月29日
    100
  • CSS3中calc()做响应模式布局方法介绍

    这篇文章主要介绍了 css3的calc()做响应模式布局的实现方法,需要的朋友可以参考下  REM方法 calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新…

    编程技术 2025年3月29日
    100

发表回复

登录后才能评论