2012-12-19 2 views
3

양식의 배경 이미지의 불투명도는 변경할 수 있습니까? 양식 안의 필드는 변경할 수 있습니까? CSS는 :하위 요소가 아닌 배경의 불투명도 변경

#myForm{ 
    background-image:url("images/Binary.jpg");  
    border:1px solid #080808; 
    box-shadow:#444444 0 0 1px inset; 
    margin:20px auto 20px 52%; 
    padding:20px; 
    width:484px; 
    -moz-box-shadow:black 4px 5px 11px; 
    -webkit-box-shadow:black 4px 5px 11px; 
    box-shadow:black 4px 5px 11px; 
} 

그래서,이 내 CSS이고 나는 Binary.jpg의 불투명도뿐만 아니라 양식의 내용을 줄이고 자. 그것은 가능한가 ??

+0

가 아니 당신은 이미지 편집기를 사용하여 불투명도를 변경해야합니다

<div class="wrapper"> <div class="holder">This is awesome yea ;)</div> </div> 

CSS. –

답변

0

글쎄, 해킹 했으니 원한다면 확실히 이렇게 할 수있다.

Demo

HTML

.wrapper { 
    position: relative; 
    color: #fff; 
} 

.wrapper:before { 
    content: ""; 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-image: url('http://www.freegreatpicture.com/files/146/25234-colorful-high-resolution-background.jpg'); 
    opacity: 0.7; 
} 

.holder { 
    z-index: 2; 
    position: relative; 
} 
+0

고마워. 나는 이것을 배경 배경으로하고 싶었다. 그러나 아직도 나는 나의 목적에 따라 어떻게 든 이것을 조정할 것이다. –

1

간단히 둡니다. 이미지를 반투명 한 PNG로 만들어야합니다.

+0

이것은 실제로 가능합니다. – Roberrrt

+0

@Roberrrt 불가능합니다. 묻는 사람이 얻으려고하는 효과는 사양 (https://drafts.csswg.org/css-color-3/#opacity)에 위배됩니다. 브라우저는 단순히 불투명도에 대한이 동작을 지원하지 않습니다. –

0

당신은 작동 할 수처럼

또는 뭔가를 시도 적은 opecativy의 GIF 또는 PNG 이미지로 가져가 덜 불투명 이미지 변경 배경이에 의해 할 수

<div id="myForm"> 
    <form>...</form> 
</div> 

CSS

div { 
-khtml-opacity:.50; 
-moz-opacity:.50; 
-ms-filter:"alpha(opacity=50)"; 
    filter:alpha(opacity=50); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5); 
    opacity:.50; 
} 
+0

틀린 대답 친구 – underscore

관련 문제