Прозрачная кнопка поверх изображений

Question

Я хочу создать прозрачную кнопку поверх изображений.

как этого

Моих Css навыки превысит предел здесь. Как мне это сделать? Он должен работать на всех браузерах.

Answer 1

Допустим, у вас есть контейнер div внутри внутри тега изображения и под тегом кнопки.

<div id="box"> 
<img....> 
<div class="overlaybutton"><a href=...." class="button"><font color="#ffffff">profile blabla</font></a></div> 
</div> 

Это должен быть минимальный код, который вы должны предоставить. Теперь, чтобы справиться с проблемой: Все, что вам нужно сделать, это изменить положение окна img и overlaybutton в коде css. Что-то вроде этого:

.box img { 
    position: absolute; 
.. 
.. 
} 

.box .overlaybutton { 
    position: absolute; 
    opacity:0.5; //to make it transparent 
} 

Остальное должно быть объяснено самостоятельно. Надеюсь, это помогло вам.

Answer 2

Я нашел плохое решение и как его оптимизировать для правильной работы? Верхний край: -37px; и margin-left: -83px; это не правильный путь, и это не работает по всей платформе.

HTML:

<div class="transparent-button-box"> 
<div ng-if="(!model.fileList)"> 
     <img ng-src="{{dummyimgpath}}" class="profile-img-box" width="{{imgwidthlarge}}" alt="" /> 
    </div> 
    <div ng-if="(model.fileList.length > 0)"> 
     <div ng-repeat="fileList in model.fileList"> 
      <a prettyp class="image" ng-href="{{fileList.uri}}" rel="prettyPhoto[mainpair1]" target="_blank" > 
      <img ng-src="{{fileList.uri}}" class="profile-img-box" width="{{imgwidthlarge}}" alt="" /> 
      </a> 
     </div> 
    </div> 
    <a class="overlaybutton" href="" data-ng-click="showUploadPic()">Upload img</a> 

CSS:

.transparent-button-box { 
position: relative;} 

.transparent-button-box .overlaybutton { 
position: absolute; 
background-color: #000; 
color: #fff; 
opacity: 0.7; 
filter: alpha(opacity=70); /* For IE8 and earlier */ 
height: 33px; 
vertical-align: middle; 
text-align: center; 
margin-top: -37px; 
margin-left: -83px; 
width: 167px;}