1. 首页
  2. 问答
  3. 如何使图像内联

如何使图像内联

2015-05-06 51 views
1

你好，我正在创建一个弹出框，右侧有一个文本和一个窗体，左侧有一个白色图像。不幸的是，我似乎无法使白色图像与右侧的表单内联。任何想法我可能做错了什么？如何使图像内联

http://crowdmedia.com.au/?page_id=721

HTML代码：

<div id="ppsPopupShell_[ID]" class="ppsPopupShell ppsPopupListsShell"> 
    <a href="#" class="ppsPopupClose ppsPopupClose_[close_btn]"></a> 
    <div class="ppsInnerTblContent"> 
     <div class="ppsPopupListsInner ppsPopupInner"> 
      [if enb_label] 
       <div class="ppsPopupLabel ppsPopupListsLabel">[label]</div> 
      [endif] 
      <div style="clear: both;"></div> 
      [if enb_txt_0] 
      <div class="ppsPopupTxt ppsPopupClassyTxt ppsPopupClassyTxt_0 ppsPopupTxt_0"> 
       [txt_0] 
      </div> 
      [endif] 

     </div> 
     <div class="ppsRightCol"> 
     [if enb_txt_1] 
      <div class="ppsPopupTxt ppsPopupClassyTxt ppsPopupClassyTxt_1 ppsPopupTxt_1"> 
       [txt_1] 
      </div> 
      [endif] 
      <div style="clear: both;"></div> 
     [if enb_subscribe] 
     <div class="ppsSubscribeShell"> 
      [sub_form_start] 
       [if enb_sub_name] 
       <input type="text" name="name" placeholder="Name" /> 
       [endif] 
       <input type="text" name="email" placeholder="Email" /> 
       <input type="submit" name="submit" value="[sub_btn_label]" /> 
      [sub_form_end] 
      <div style="clear: both;"></div> 
     </div> 
     [endif] 
     [if enb_sm] 
     <div class="ppsSm"> 
      [sm_html] 
     </div> 
     [endif] 
     [if enb_foot_note] 
     <div class="ppsFootNote"> 
      [foot_note] 
     </div> 
     [endif] 
     <div> 
    </div> 
</div>

CSS代码：

#ppsPopupShell_[ID] { 
    width: [width][width_measure]; 
    padding: 15px; 
    font-family: Georgia, Times, serif; 
    font-size: 13px; 
    line-height: 21px; 
    font-weight: normal; 
    color: #000; 
} 
#ppsPopupShell_[ID] .ppsInnerTblContent { 
    display: block; 
} 
#ppsPopupShell_[ID] .ppsPopupInner { 
    {% if popup.params.tpl.enb_subscribe or popup.params.tpl.enb_foot_note or popup.params.tpl.enb_sm %} 
    width: 60%; 
    box-shadow: rgba(32,32,32,1) 0 4px 20px; 
    border-radius:3px; 
    [else] 
    width: 100%; 
    [endif] 
    display: block; 
    float: left; 
    margin-top: 30px; 
    [if bg_type_0 == 'color'] 
    background: -moz-radial-gradient(center, ellipse cover, {{ adjust_brightness(popup.params.tpl.bg_color_0, 50) }} 0%, [bg_color_0] 100%); /* ff3.6+ */ 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, {{ adjust_brightness(popup.params.tpl.bg_color_0, 50) }}), color-stop(100%, [bg_color_0])); /* safari4+,chrome */ 
    background:-webkit-radial-gradient(center, ellipse cover, {{ adjust_brightness(popup.params.tpl.bg_color_0, 50) }} 0%, [bg_color_0] 100%); /* safari5.1+,chrome10+ */ 
    background: -o-radial-gradient(center, ellipse cover, {{ adjust_brightness(popup.params.tpl.bg_color_0, 50) }} 0%, [bg_color_0] 100%); /* opera 11.10+ */ 
    background: -ms-radial-gradient(center, ellipse cover, {{ adjust_brightness(popup.params.tpl.bg_color_0, 50) }} 0%, [bg_color_0] 100%); /* ie10+ */ 
    background:radial-gradient(ellipse at center, {{ adjust_brightness(popup.params.tpl.bg_color_0, 50) }} 0%, [bg_color_0] 100%); /* w3c */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='{{ adjust_brightness(popup.params.tpl.bg_color_0, 50) }}', endColorstr='[bg_color_0]',GradientType=1); /* ie6-9 */ 
    [elseif bg_type_0 == 'img'] 
    background-image: url("[bg_img_0]"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    [endif] 

} 
#ppsPopupShell_[ID] .ppsPopupLabel { 
    color: #56912d; 
    font-family: 'arial', arial; 
    font-size: 30px; 
    letter-spacing: -1px; 
    line-height: 40px; 
    letter-spacing: -1px; 
    font-weight: bold; 
    margin-top: 15px; 
    padding-left: 20px; 
    text-shadow: 0px 0px 1px #56912d; 
    -moz-text-shadow: 0px 0px 1px #56912d; 
    -webkit-text-shadow: 0px 0px 1px #56912d; 

} 
#ppsPopupShell_[ID] .ppsRightCol { 
    display: table-cell; 
    border-radius:3px; 
    width: 40%; 
    height: 110%; 
    display: block; 
    float: right; 
    box-shadow: rgba(32,32,32,1) 0 4px 20px; 
    padding: 10px 0; 
    [if bg_type_1 == 'color'] 
    background: -moz-radial-gradient(center, ellipse cover, {{ adjust_brightness(popup.params.tpl.bg_color_1, 50) }} 0%, [bg_color_1] 100%); /* ff3.6+ */ 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, {{ adjust_brightness(popup.params.tpl.bg_color_1, 50) }}), color-stop(100%, [bg_color_1])); /* safari4+,chrome */ 
    background:-webkit-radial-gradient(center, ellipse cover, {{ adjust_brightness(popup.params.tpl.bg_color_1, 50) }} 0%, [bg_color_1] 100%); /* safari5.1+,chrome10+ */ 
    background: -o-radial-gradient(center, ellipse cover, {{ adjust_brightness(popup.params.tpl.bg_color_1, 50) }} 0%, [bg_color_1] 100%); /* opera 11.10+ */ 
    background: -ms-radial-gradient(center, ellipse cover, {{ adjust_brightness(popup.params.tpl.bg_color_1, 50) }} 0%, [bg_color_1] 100%); /* ie10+ */ 
    background:radial-gradient(ellipse at center, {{ adjust_brightness(popup.params.tpl.bg_color_1, 50) }} 0%, [bg_color_1] 100%); /* w3c */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='{{ adjust_brightness(popup.params.tpl.bg_color_1, 50) }}', endColorstr='[bg_color_1]',GradientType=1); /* ie6-9 */ 
    [elseif bg_type_1 == 'img'] 
    background-image: url("[bg_img_1]"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    [endif] 

} 
#ppsPopupShell_[ID] .ppsSubscribeShell form { 
    padding: 30px 30px 0; 
} 
#ppsPopupShell_[ID] .ppsSubscribeShell input { 
    width: 100%; 
    margin-bottom: 10px; 
    height: 40px; 
    border: 1px solid #d1b36d; 
} 
#ppsPopupShell_[ID] .ppsSubscribeShell input[type=text] { 
    box-shadow: 2px 2px 2px #dcdcdc inset; 
    padding-left: 22px; 
    font-size: 17px; 
    background-image: url("http://crowdmedia.com.au/wp-content/plugins/popup-by-supsystic/modules/popup/img/assets/user-black-icon.png"); 
    background-repeat: no-repeat; 
    background-position: 5px center; 
    border-radius: 2px !important; 
} 
#ppsPopupShell_[ID] .ppsSubscribeShell input[type=text][name="email"] { 
    background-image: url("http://crowdmedia.com.au/wp-content/plugins/popup-by-supsystic/modules/popup/img/assets/email-black-icon.png"); 
    background-repeat: no-repeat; 
    background-position: 5px center; 
    border-radius: 2px !important; 
} 
#ppsPopupShell_[ID] .ppsSubscribeShell input[type=submit] { 
    [if bg_type_2 == 'color'] 
    background: [bg_color_2]; 

    [elseif bg_type_2 == 'img'] 
    background-image: url("[bg_img_2]"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    [endif] 

    color: #fff; 
    font-size: 20px; 
    text-shadow: 2px 2px 2px #000; 
    cursor: pointer; 
} 
#ppsPopupShell_[ID] .ppsSubscribeShell input[type=submit]:hover { 
    box-shadow: inset 1px 1px 3px #666; 
} 
#ppsPopupShell_[ID] .ppsPopupTxt_0 { 
    float: left; 
    width: 100%; 
    color: #888888; 
    font-family: 'arial', arial; 
    font-weight: 400; 
    line-height: 1.3; 
    font-size: 14px; 
} 
#ppsPopupShell_[ID] .ppsPopupTxt_1 { 
    color:#ffffff; 
    font-family: 'arial', arial; 
    font-weight: 700; 
    text-shadow: #000000 1px 1px 1px; 
    font-size: 25px; 
    padding-left: 20px; 
    letter-spacing: -1px; 
    text-align: center; 
    line-height: 1.4; 
    [if enb_txt_0] 
    width: 95; 
    [else] 
    width: 95%; 
    [endif] 
} 
#ppsPopupShell_[ID] .ppsPopupClose { 
    background-repeat: no-repeat; 
    cursor: pointer; 
    top:-20px; 
    right:1px; 
    z-index:99999; 
} 
#ppsPopupShell_[ID] .ppsPopupClose.ppsPopupClose_lists_black { 
    top: 0 !important; 
    right: 0 !important; 
} 
#ppsPopupShell_[ID] .ppsPopupClose:hover { 
    opacity: 0.8; 
} 
#ppsPopupShell_[ID] .ppsFootNote{ 
    color: #585858; 
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-size: x-small; 
    font-style: italic; 
    line-height: 14px; 
    margin: 5px 30px; 
} 

#ppsPopupShell_[ID] p{ 
margin-left:20px; 
} 
#ppsPopupShell_[ID] b{ 
color: #000; 
} 
#ppsPopupShell_[ID] ul li { 
height:30px; 
}

感谢您的帮助。

来源

2015-05-06 Endô Fujimoto

+0

你能解释一下“获得白色图像与内嵌“这个更进一步？我不明白。甚至可以张贴结果应该是什么样子的图片 – caramba

+0

基本上我只想让白色图像与窗体上的图像具有相同的高度。那有意义吗。干杯。 –

回答

2

从您考虑的页面的检查元素。您有以下添加到#ppsPopupShell_100_14394

background-color: #fff;

然后#ppsPopupShell_100_14394 .ppsPopupInner你必须删除box-shadow

以下是我所得到的屏幕截图：

enter image description here

来源

2015-05-06 23:49:30 SaidbakR

+1

为了说明这一点，请注意，查看元素时，每次在'＃ppsPopupShell'后面都会显示一个不同的数字。所以基本上在你的样式表中做同样的事情，但保留数字，它应该工作。 – nomistic

相关问题

 相关问题