Allgemeines » Bild inTextbox?

12.06.2018 12:07 (zuletzt bearbeitet: 12.06.2018 12:08)

die dani
#1

di

Ein liebes Hallo an euch :),

ich verzweifle gerade Extremst, beim hinzufügen eines Bildes in eine Textbox.
Des Weiteren hätte ich gern noch einen Button in die Box. Ist das möglich? sicher eine kleine Sache, wo ich nicht drauf komme.

Hier mal der Code vom Header

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
 

<style type="text/css">
/*<![CDATA[*/
/* schattierte Textbox */
 
.Textbox {
 
padding: 10px;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
-webkit-box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.6);
box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.6);
border: 1px solid rgb(204, 204, 204);
color: black;
text-align: left;
text-decoration: none;
text-underline: none;
 
filter:alpha(opacity=90);
-moz-opacity: 0.90;
opacity: 0.90;
 
background: white;
background: -moz-linear-gradient(top, white 0%, white 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #white));
background: -webkit-linear-gradient(top, white 0%, white 100%);
background: -o-linear-gradient(top, white 0%, white 100%);
background: -ms-linear-gradient(top, white 0%, white 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='white',GradientType=0 );
background: linear-gradient(top, white 0%, white 100%);
 
)
/*]]>*/
</style>
 

 

und das vom widget

1
 
<div class="Textbox"><p>Hier steht Dein individueller Text</p>

LG

Antworten

Beitrag melden

#2

12.06.2018 12:53

die dani
#2

di

die dani

okay das einfügen des Bildes funktioniert, nur ein wenig anders beim mac. aber geht der Button auch zu kopieren? weil kopiert schon, aber der over-effekt wird nicht mit übernommen.

Antworten

Beitrag melden

#3

14.06.2018 03:12 (zuletzt bearbeitet: 14.06.2018 03:25)

az_
#3

az_

...das geht in CSS mit einer Pseudo-Klasse: .textbox:after{...} oder .textbox:before{...}

Das Bild muss einen transparenten Hintergrund haben und kann per background-image: URL('...'); in .textbox{...} geladen werden. Der Gradient wird dann mit .textbox:before darunter geschoben. Achtung: content:""; und position:absolute;

Auf https://designtest-hamburg.jimdo.com/ habe ein Lightbox-Skript benutzt, das ist auch nett. Oder google mal nach "vbox" Beispiel: https://designtest-hamburg.jimdo.com/ima...x-hover-effect/ (...ist mir aber etwas kaputt gegangen) Auf https://forum-images.jimdo.com/ unter "hover-Effekte" sieht das besser aus.

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html