zoukankan      html  css  js  c++  java
  • 嵌入式图片下沉效果

    本文实现嵌入式图片下沉效果,先上几张效果图:

    css代码如下:

    #firstWord{
        padding:0 10px 0 374px;background: url("images/validateBtn.png") no-repeat top left white;background-size:374px 105px;
        color: red;font-size: 84px;font-weight: bold;white-space:nowrap;
        position: relative;float: left;
        min-width: 1px;min-height: 105px;
    }

    dom结构如下:

    <p id="myP">
        <div id="firstWord">标题</div>开始开始开始开始开始开始开始开始开始文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
    </p>

     如有表述不准确之处,欢迎指正,欢迎补充,感谢阅读。

  • 相关阅读:
    一千行 MySQL 学习笔记
    linux学习(二)
    linux学习(二)
    内联元素
    内联因素1.默认内容撑开盒子大小
    定位absolute使内联支持宽高(块属性变为内联,内容默认撑开)margin auto 失效
    over
    float浮动问题:会造成父级元素高度坍塌;
    float的元素脱离文档流,但不完全脱离,只是提升了半层;
    float了的元素和内联元素不支持margin:auto
  • 原文地址:https://www.cnblogs.com/wangzhenyu666/p/8302099.html
Copyright © 2011-2022 走看看