【问题标题】:Having hard time setting a border image很难设置边框图像
【发布时间】:2013-01-03 13:56:50
【问题描述】:

我正在尝试为我的网站设置一个相当复杂的边框图像。我无法将其设为背景图片,因为它实际上是幻灯片的边框,幻灯片内容在实际滑动时必须位于边框下方,而对于背景图片,我假设内容会位于边框上方。

所以,基本上我需要帮助如何将其设为 div 的边框图像。或者如果有更好的方法然后将其作为边界,请告诉我。

谢谢。

【问题讨论】:

  • 右下角不能使用纯 CSS。我建议制作一个透明的 .png 并将 z-index 设置为高于内容
  • 因为我不是一个优秀的设计师,我真的需要一个关于一切的例子。 :\
  • 你不会在stackoverflow上找到愿意为你免费设计的人

标签: html css slider border slideshow


【解决方案1】:

transparet png 图像不是 html,您需要使用 Photoshop 或 Gimp 等软件来完成,否则您可以使用 div 来完成此操作

【讨论】:

    【解决方案2】:
    <style>
        .screen {
            height: 422px;  
            width: 820px;       
        }
        .back {
            position: absolute;
            height: 422px;      
            width: 820px;       
            background-image:url('test.png');
        }
        .content {
            position: absolute;
            height: 320px;
            width: 672px;
            margin-left: 73px;
            margin-top: 56px;
            border-radius: 50px;
            overflow:hidden;
        }
    </style>
    <div class="screen" >
        <div class="content" >
            put here what ever you want to put inside
        </div>
        <div class="back" ></div>
    </div>
    

    你的图片和我一起工作

    【讨论】:

      【解决方案3】:

      您可以使用 before/after 伪元素将您不寻常的“边框”附加为背景图像。

      div.slide {
          background: yellow;
          position: relative;
      }
      
      div.slide:before {
          display:  block;
          content: " ";
          position: absolute;
          width: 100%;
          height: 100%;
          background: url(slide-bg.png) no-repeat;
          background-size: 100% 100%;
          z-index: 1;
      }
      

      http://jsfiddle.net/kTgJJ/

      演示使用不透明到透明的渐变,因此您可以看到效果。您的图像只需要有透明区域供文本显示,以及不应该显示的不透明区域。根据需要向.slide 添加填充。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2013-02-15
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-04-23
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多