如何在图像出现时添加边框？

我有一个按钮来选择图像，我有一个空间，我想要显示该图像的预览。这个空间就在那个按钮的上方。现在我想在此图像上添加dashed边框，并且边框opacity应该是0.47。但问题是我已经在我的代码中插入了图像标签，我只是更改<img src="">动态使用JS &这就是为什么我可以在选择图像之前看到边框。如何在图像出现时添加边框？

我想这样的事情：

当图像是有它的完全正常的，就像这样：

但图像是不存在的只显示支柱上方按钮一个边陲，像这样：

这是我的HTML/PHP代码：

<div> 
<div id="post-image-content"> 
<div id="post-image-div"> 
<img id="blah" class="post-image" alt=" " width="100" height="100"/> 
<img id="closes" class="close-button-image" src="<?php echo $this->webroot.'mainsite/img/img-close.png'?>" /> 
    </div> 
    </div> 


<a href="#"> 
<i class="fa fa-camera" aria-hidden="true" id="capture_image_01"></i> 
</a> 
<?php echo $this->Form->input('cover_image_url', array('type' => 'file','onchange' => 'document.getElementById(\'blah\').src = window.URL.createObjectURL(this.files[0])','style' => array("display:none"),'label' => false, 'div' => false));?> 

</div>

这里是我的CSS

.post-image { 
    margin-bottom: 10px; 
margin-left: 10px; 
border-radius: 4px; 
opacity: 0.5; 
border: 2px dashed rgba(20, 134, 171, 0.47); 
padding: 3px; 


} 
#post-image-content { 
display: block; 
overflow: hidden; 
} 

#post-image-div { 
position:relative; 
z-index:0; 
float: right; 
margin: 2px 2px; 

} 

#post-image-div:hover .close-button-image { 
    position: absolute; 
right: 6px; 
top: 8px; 
display: block !important; 
z-index: 1; 
height: 10px; 
width: 10px; 
} 


.close-button-image { 
     position: absolute; 
right: 6px; 
top: 8px; 
display: none; 
z-index: 1; 
height: 10px; 
width: 10px; 
}

任何帮助，将不胜感激，因为我没有任何线索，现在要做的。

来源

2017-09-06 Vivek Saha

您可以像之前添加条件，如果没有默认的图像或img标签不需要所示

<?php if ($image): ?> 
    <img id="blah" class="post-image" alt=" " width="100" height="100"/> 
<?php endif ?>

或添加条件，该类只（应用所需的CSS）

<img id="blah" class="<?php echo $image ? 'post-image' : '' ?>" alt=" " width="100" height="100"/>

来源

2017-09-06 05:38:12

我认为这会工作，但它给我这个消息“未定义变量：图片[APP \查看\上市\ index.ctp，” –

你需要更换'$ image'您图像路径变量或分配到该“$ image”变量的路径 –

完成。谢谢:) –

-1

#post-image-div{ 
 
\t border: 2px dashed rgba(20, 134, 171, 0.47); 
 
\t padding:2px; 
 
\t border-radius:3px; 
 
} 
 

 
#post-image-div img,#post-image-div{ 
 
\t width:100px; 
 
\t height:100px;

<div id="post-image-div"> 
 
    <img id="closes" class="close-button-image" src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" /> 
 
</div>

试试这个代码

来源

2017-09-06 06:19:32

这个答案会更好，如果你想添加一些关于它为什么有帮助的解释。 – DaveyDaveDave

如何在图像出现时添加边框？

回答

相关问题