Ich habe ein Hintergrundbild und möchte einen bestimmten Teil davon unscharf machen, ohne das ganze Bild zu beeinflussen? Zum Beispiel, nur unten links Ecke, Mitte oder oben rechts Ecke? Ist es möglich?Ist es möglich, nur bestimmte Teile des Bildes mit CSS-Filter zu verwischen?
Leider kann nur mit CSS dies passieren. Sie können Ihr Ziel erreichen, indem Sie ein zusätzliches absolute Element in denselben Container setzen, der Ihr Hintergrundbild enthält.
Wahrscheinlich so etwas wie das.
$(document).ready(function() {
$('button').click(function(e) {
$(".blurry").css('background-color', 'white')
.css('opacity', '.1')
.css('box-shadow', 'white 0px 0px 20px 20px');
});
});.wrapper {
width:500px;
height:150px;
position:relative;
}
#brand {
width:500px;
height:150px;
display:inline-block;
background-image:url("http://spmdesign.net/wp-content/uploads/2013/05/ss-2-bg.jpg");
}
.blurry {
width:40px;
height:50px;
position:absolute;
left:30px;
bottom:25px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="wrapper">
<a id="brand"></a>
<div class="blurry"></div>
</div>
</div>
<button>blur</button>
Was ist Ihr eigentliches Ziel ist? Versuchen Sie, Informationen zu verbergen (weil clientseitige Unschärfe dabei nicht hilft) oder dem Benutzer zu helfen, sich auf einen Teil des Bildes zu konzentrieren? – merlin2011
überprüfen Sie diese: https://css-tricks.com/frosting-glass-css-filters/ && http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/&& https://css-tricks.com/almanac/properties/f/filter/ && https://css-tricks.com/blurry-background-effect/ – henser
@henser vielen dank – alpha