#html #css #background #base64
#HTML #css #фон #base64
Вопрос:
Я пытаюсь изменить значки в дереве JS. При предоставлении значков в виде ссылки png в свойстве CSS background это работает. Ниже приведен используемый CSS.
li.jstree-open > .jstree-icon { background:url("http://jstree.com/tree-icon.png") 0px 0px no-repeat !important;
} //Working
li.jstree-closed > .jstree-icon { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKcAAACnCAYAAAB0FkzsAAAFA0lEQVR4nO3dz4ocVRiG8Tcha9cuSnHRd6BIEIKoiBsXutLsQiR4CW4sXPRliJI7UNyJRBAhSFCvoAghaVyL6zBxMfWZcdI9U1Vd59Rb5zw/6M1Mc/o09fSZ6a4/feWZnglwdHXpCQCHECdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsXVt6AiXYbna3Jb0n6UTSvbZr7i47ozJc4fvWp9tudi9J k7Su d 9bOkj9uu Sf/rMpBnBP1Yd6T9MaBuzyQ9D6BTsf/nBMMCFOS3pT0U39fTECcIw0MMxDoEYhzhJFhBgKdiDgHmhhmINAJiHOAI8MMBDoScV5ipjADgY5AnBeYOcxAoAMR5wGJwgwEOgBx7pE4zECglyDOczKFGQj0AsR5RuYwA4EeQJy9hcIMBLoHcWrxMAOBnlN9nCZhBgI9o o4zcIMBNqrNk7TMAOBqtI4zcMM1QdaXZwrCTNUHWhVca4szFBtoNXEmSHMR/0thSoDrSLOTGG 3d8eJXqM6gItPs5cYbZd87jtmsci0NkUHWfOMOMHBDqfYuNcIsxAoPMoMs4lwwwEerzi4nQIMxDocYqK0ynMQKDTFROnY5iBQKcpIk7nMAOBjrf6ONcQZiDQcVYd55rCDAQ63GrjXGOYgUCHWWWcGcJ8qERhBgK93OrizBTmOynDDAR6sVXFWVKYgUAPW02cJYYZCHS/VcRZcpiBQF9kH2cNYQYC/T/rOGsKMxDoc7Zx1hhmINBTlnHWHGYgUMM4CfO52gO1ipMwX5Qp0B8dA7WJkzAPyxDodRkGavHFrBn3le8SjZ/FdrN7VdIvkl5L9BC/SfrA5ctkF185CXO42lbQReMkzPFqCnSxOAlzuloCXSROwjxeDYFmj5Mw51N6oFnjJMz5lRxotjgJM51SA80SJ2GmV2KgyeMkzHxKCzRpnISZX0mBJouTMJdTSqBJ9q1vN7trkn7V6ZNIgTAHyLAv/r6kG23XnKQYPNXK ZUIc3EZVtC3JH2ZaOxkcX6aaFzCHClDoDcTjZsszpcTjEmYEyUONMW2lpQuzt9nHo8wj5Qw0Lm39X9SxfmFpKczjUWYM0kQ6FOdbuskksTZds0DSZ9LOvZdHGHObMZATyTdabvmz6MndUCyzznbrvlWxwVKmInMEOiJpM/arrk715z2SX4O0Xazuy3pa417IRBmBhM/B80SppRh33q/gt7R8BWUMDOZsIJmC1PKdFTSiEAJM7MRgWYNU8p8avB2s7sl6Rvtf1EQ5oIu ROfPUwp85Hw/ZO7Ken8edH3RZiL6lfQGzo9d/2svyV9kjtMaaGLKmw3u0bSh5JekfSHpO9THTyAcbab3VVJH0l6XdITST 0XfPXEnOxuOIHsM/iV/wADiFO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2PoXynrWkNPDmAUAAAAASUVORK5CYII=") !important;
background-position: 0px 0px !important;
background-repeat: no-repeat !important;
} //not working
Код данных предназначен для значка с прямым углом вверх, который я получил с одного сайта онлайн-конвертации,http://fatopng.com/fontawesome-to-base64
Полный пример кода приведен в code pen, https://codepen.io/JGSpark/pen/XGEZRe
Я не уверен, почему он не применяет стиль в одном случае, а не в другом.
Кто-нибудь может, пожалуйста, разобраться в этом? Я проверяю это более 2 часов.
Ответ №1:
Просто удалите > из css, как:
li.jstree-closed .jstree-icon { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKcAAACnCAYAAAB0FkzsAAAFA0lEQVR4nO3dz4ocVRiG8Tcha9cuSnHRd6BIEIKoiBsXutLsQiR4CW4sXPRliJI7UNyJRBAhSFCvoAghaVyL6zBxMfWZcdI9U1Vd59Rb5zw/6M1Mc/o09fSZ6a4/feWZnglwdHXpCQCHECdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsXVt6AiXYbna3Jb0n6UTSvbZr7i47ozJc4fvWp9tudi9J k7Su d 9bOkj9uu Sf/rMpBnBP1Yd6T9MaBuzyQ9D6BTsf/nBMMCFOS3pT0U39fTECcIw0MMxDoEYhzhJFhBgKdiDgHmhhmINAJiHOAI8MMBDoScV5ipjADgY5AnBeYOcxAoAMR5wGJwgwEOgBx7pE4zECglyDOczKFGQj0AsR5RuYwA4EeQJy9hcIMBLoHcWrxMAOBnlN9nCZhBgI9o o4zcIMBNqrNk7TMAOBqtI4zcMM1QdaXZwrCTNUHWhVca4szFBtoNXEmSHMR/0thSoDrSLOTGG 3d8eJXqM6gItPs5cYbZd87jtmsci0NkUHWfOMOMHBDqfYuNcIsxAoPMoMs4lwwwEerzi4nQIMxDocYqK0ynMQKDTFROnY5iBQKcpIk7nMAOBjrf6ONcQZiDQcVYd55rCDAQ63GrjXGOYgUCHWWWcGcJ8qERhBgK93OrizBTmOynDDAR6sVXFWVKYgUAPW02cJYYZCHS/VcRZcpiBQF9kH2cNYQYC/T/rOGsKMxDoc7Zx1hhmINBTlnHWHGYgUMM4CfO52gO1ipMwX5Qp0B8dA7WJkzAPyxDodRkGavHFrBn3le8SjZ/FdrN7VdIvkl5L9BC/SfrA5ctkF185CXO42lbQReMkzPFqCnSxOAlzuloCXSROwjxeDYFmj5Mw51N6oFnjJMz5lRxotjgJM51SA80SJ2GmV2KgyeMkzHxKCzRpnISZX0mBJouTMJdTSqBJ9q1vN7trkn7V6ZNIgTAHyLAv/r6kG23XnKQYPNXK ZUIc3EZVtC3JH2ZaOxkcX6aaFzCHClDoDcTjZsszpcTjEmYEyUONMW2lpQuzt9nHo8wj5Qw0Lm39X9SxfmFpKczjUWYM0kQ6FOdbuskksTZds0DSZ9LOvZdHGHObMZATyTdabvmz6MndUCyzznbrvlWxwVKmInMEOiJpM/arrk715z2SX4O0Xazuy3pa417IRBmBhM/B80SppRh33q/gt7R8BWUMDOZsIJmC1PKdFTSiEAJM7MRgWYNU8p8avB2s7sl6Rvtf1EQ5oIu ROfPUwp85Hw/ZO7Ken8edH3RZiL6lfQGzo9d/2svyV9kjtMaaGLKmw3u0bSh5JekfSHpO9THTyAcbab3VVJH0l6XdITST 0XfPXEnOxuOIHsM/iV/wADiFO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2PoXynrWkNPDmAUAAAAASUVORK5CYII=") !important;
Комментарии:
1. Это работает для вас, просто удалив это > ? не могли бы вы, пожалуйста, поделиться со мной ссылкой code pen?
2. Большое спасибо. Я только что заметил, что вы добавили
background-size: 100%, что решило мою проблему.