tutorials.de Buch-Aktion 02/2012
Like Tree1Danke
  • 1 Beitrag von spicelab
ERLEDIGT
JA
ANTWORTEN
2
ZUGRIFFE
571
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 11.08.10 15:46 #1
    qsrs qsrs ist offline Mitglied Brokat
    Registriert seit
    Jan 2005
    Beiträge
    438
    Hallo,

    ich verwende folgendes CSS, um div-Elemente transparent darzustellen:

    Code :
    1
2
3
4

      /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;

    soweit funktioniert alles. Jetzt möchte ich noch, dass die Ecken rund erscheinen, das mache ich für Firefox mit

    Code :
    1
2
3
4

        -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;

    Da es für den IE nur mit einem Skript funktioniert, binde ich folgende htc-Datei ein:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

    --Do not remove this if you are using--
Original Author: Remiz Rahnas
Original Author URL: [url]http://www.htmlremix.com[/url]
Published date: 2008/09/24
 
Changes by Nick Fetchak:
- IE8 standards mode compatibility
- VML elements now positioned behind original box rather than inside of it - should be less prone to breakage
Published date : 2009/11/18
 
 
<public:attach event="oncontentready" onevent="oncontentready('v08vnSVo78t4JfjH')" />
<script type="text/javascript">
 
// findPos() borrowed from [url]http://www.quirksmode.org/js/findpos.html[/url]
function findPos(obj) {
    var curleft = curtop = 0;
 
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
 
    return({
        'x': curleft,
        'y': curtop
    });
}
 
function oncontentready(classID) {
  if (this.className.match(classID)) { return(false); }
 
    if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); }
 
    this.className = this.className.concat(' ', classID);
    var arcSize = Math.min(parseInt(this.currentStyle['-moz-border-radius'] ||
                                    this.currentStyle['-webkit-border-radius'] ||
                                    this.currentStyle['border-radius'] ||
                                    this.currentStyle['-khtml-border-radius']) /
                           Math.min(this.offsetWidth, this.offsetHeight), 1);
    var fillColor = this.currentStyle.backgroundColor;
    var fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1');
    var strokeColor = this.currentStyle.borderColor;
    var strokeWeight = parseInt(this.currentStyle.borderWidth);
    var stroked = 'true';
    if (isNaN(strokeWeight)) {
        strokeWeight = 0;
        strokeColor = fillColor;
        stroked = 'false';
    }
 
    this.style.background = 'transparent';
    this.style.borderColor = 'transparent';
 
    // Find which element provides position:relative for the target element (default to BODY)
    var el = this;
    var limit = 100, i = 0;
    while ((typeof(el) != 'unknown') && (el.currentStyle.position != 'relative') && (el.tagName != 'BODY')) {
        el = el.parentElement;
        i++;
        if (i >= limit) { return(false); }
    }
    var el_zindex = parseInt(el.currentStyle.zIndex);
    if (isNaN(el_zindex)) { el_zindex = 0; }
    //alert('got tag '+ el.tagName +' with pos '+ el.currentStyle.position);
 
    var rect_size = {
        'width': this.offsetWidth - strokeWeight,
        'height': this.offsetHeight - strokeWeight
    };
    var el_pos = findPos(el);
    var this_pos = findPos(this);
    this_pos.y = this_pos.y + (0.5 * strokeWeight) - el_pos.y;
    this_pos.x = this_pos.x + (0.5 * strokeWeight) - el_pos.x;
 
    var rect = document.createElement('v:roundrect');
    rect.arcsize = arcSize +'px';
    rect.strokecolor = strokeColor;
    rect.strokeWeight = strokeWeight +'px';
    rect.stroked = stroked;
    rect.style.display = 'block';
    rect.style.position = 'absolute';
    rect.style.top = this_pos.y +'px';
    rect.style.left = this_pos.x +'px';
    rect.style.width = rect_size.width +'px';
    rect.style.height = rect_size.height +'px';
    rect.style.antialias = true;
    rect.style.zIndex = el_zindex - 1;
 
    var fill = document.createElement('v:fill');
    fill.color = fillColor;
    fill.src = fillSrc;
    fill.type = 'tile';
 
    rect.appendChild(fill);
    el.appendChild(rect);
 
    var css = el.document.createStyleSheet();
    css.addRule("v\\:roundrect", "behavior: url(#default#VML)");
    css.addRule("v\\:fill", "behavior: url(#default#VML)");
 
    isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
    // IE6 doesn't support transparent borders, use padding to offset original element
    if (isIE6 && (strokeWeight > 0)) {
        this.style.borderStyle = 'none';
        this.style.paddingTop = parseInt(this.currentStyle.paddingTop || 0) + strokeWeight;
        this.style.paddingBottom = parseInt(this.currentStyle.paddingBottom || 0) + strokeWeight;
    }
 
    if (typeof(window.rounded_elements) == 'undefined') {
        window.rounded_elements = new Array();
 
        if (typeof(window.onresize) == 'function') { window.previous_onresize = window.onresize; }
        window.onresize = window_resize;
    }
    this.element.vml = rect;
    window.rounded_elements.push(this.element);
}
 
function window_resize() {
    if (typeof(window.rounded_elements) == 'undefined') { return(false); }
 
    for (var i in window.rounded_elements) {
        var el = window.rounded_elements[i];
 
        var strokeWeight = parseInt(el.currentStyle.borderWidth);
        if (isNaN(strokeWeight)) { strokeWeight = 0; }
 
        var parent_pos = findPos(el.vml.parentNode);
        var pos = findPos(el);
        pos.y = pos.y + (0.5 * strokeWeight) - parent_pos.y;
        pos.x = pos.x + (0.5 * strokeWeight) - parent_pos.x;
 
        el.vml.style.top = pos.y +'px';
        el.vml.style.left = pos.x +'px';
    }
 
    if (typeof(window.previous_onresize) == 'function') { window.previous_onresize(); }
}
</script>
    Nachdem ich disee Datei einbinde, wird im IE das div-Element jedoch nicht mehr transparent dargestellt, davor schon. Ich sollte eine Möglichkeit finden, mit der ich div-Elemente transparent und mit runden Ecken darstellen kann.
     
    Zitieren Zitieren
  2. 11.08.10 16:05 #2
    Avatar von spicelab
    spicelab spicelab ist offline goaspicy
    Registriert seit
    Feb 2010
    Beiträge
    1.392
    Zitat Zitat von qsrs Beitrag anzeigen
    Ich sollte eine Möglichkeit finden, mit der ich div-Elemente transparent und mit runden Ecken darstellen kann.
    Wer suchet, der findet.

    Oder als Empfehlung:
    qsrs bedankt sich. 
    Zitieren Zitieren
  3. 19.08.10 15:58 #3
    qsrs qsrs ist offline Mitglied Brokat
    Registriert seit
    Jan 2005
    Beiträge
    438
    Vielen Dank, die Links haben mir weitergeholfen.
     
    Zitieren Zitieren
« CSS für IE und Firefox verschieden | 100% Höhe und FixedFooter »

Ähnliche Themen

  1. Hover- Effekt mit runden Ecken und Transparenz
    Von qsrs im Forum CSS
    Antworten: 5
    Letzter Beitrag: 19.08.10, 15:49
  2. Horizontales Menu mit runden Ecken hover Problem
    Von brainsucker im Forum CSS
    Antworten: 13
    Letzter Beitrag: 24.06.10, 21:31
  3. Problem mit Tabellen und runden Ecken Indesign
    Von julchen im Forum Desktop Publishing (DTP)
    Antworten: 5
    Letzter Beitrag: 14.03.10, 13:05
  4. Problem mit runden Ecken
    Von julchen im Forum CSS
    Antworten: 7
    Letzter Beitrag: 19.02.10, 20:34
  5. Transparenz-Problem abgerundete Ecken...
    Von xcylo im Forum CSS
    Antworten: 2
    Letzter Beitrag: 27.05.04, 14:15